Converta atributos data para camelCase
Passe de um atributo data do HTML para o nome no dataset do JavaScript, nos dois sentidos: data-user-profile-id vira userProfileId e userProfileId volta a ser data-user-profile-id, com as mesmas regras que o navegador aplica. Grátis no seu navegador.
- Grátis
- Funciona no seu navegador
- Sem cadastro
- Seus dados não saem do seu aparelho
Executar grátis
Exemplo resolvido
- Texto
- data-user-profile-id
- Direção
- Attribute to property
- Produção
- userProfileId
- Entrada
- data-user-profile-id
- Atributo data
- data-user-profile-id
- Propriedade dataset
- userProfileId
Atributos de dados personalizados em HTML usam nomes como data-user-profile-id, enquanto o JavaScript expõe o mesmo valor em uma propriedade camelCase de dataset, como userProfileId. Este conversor aplica as regras do navegador nos dois sentidos, permitindo que você passe da marcação ao código DOM sem adivinhar a posição dos hífens. Escolha a direção, informe um nome e receba as duas formas. A conversão direta rejeita nomes sem o prefixo obrigatório data- e ajuda você a identificar entradas incompletas antes que cheguem à aplicação.
Converta um atributo data de HTML em propriedade dataset
Escolha atributo para propriedade quando você partir de uma marcação, um template ou um atributo copiado das ferramentas do navegador. A entrada deve começar com data-; por exemplo, data-user-profile-id vira userProfileId. A conversão segue o algoritmo DOM, e não uma regra genérica de capitalização.
Primeiro, letras ASCII maiúsculas no atributo são normalizadas para minúsculas. Depois, o prefixo data- é removido e cada hífen imediatamente seguido por uma letra ASCII minúscula desaparece, enquanto essa letra fica maiúscula. Outros caracteres, como sublinhados, pontos, hífens extras, números e caracteres não ASCII, são preservados.
Assim, data-build-2-id resulta em build-2Id: o hífen antes de 2 continua, e o anterior a i é consumido. Sem o prefixo, a ferramenta devolve erro em vez de um resultado aparentemente correto.
Converta uma propriedade dataset novamente em atributo HTML
Escolha propriedade para atributo quando você partir de JavaScript, como element.dataset.userProfileId, e precisar do nome para HTML, seletores CSS, testes ou templates renderizados no servidor. O conversor acrescenta data-, insere um hífen antes de cada letra ASCII maiúscula e a torna minúscula. Números e pontuação permanecem no lugar.
O algoritmo inverso do DOM possui uma condição essencial: o nome da propriedade não pode conter um hífen já seguido por uma letra ASCII minúscula. user-profile seria ambíguo, porque a conversão direta consumiria o hífen e produziria userProfile. A ferramenta sinaliza isso como entrada inválida, sem alegar que a operação pode ser revertida com segurança. Hífens seguidos por dígitos, maiúsculas ou caracteres não ASCII continuam permitidos.
O objeto retornado mantém as duas formas para você comparar e copiar.
Use as regras exatas do DOM em vez de conversão genérica
Um formatador camelCase genérico costuma tratar espaços, sublinhados, pontuação repetida e hífens como separadores equivalentes. O mapeamento dataset do JavaScript é diferente: trata-se de uma transformação específica de caracteres entre atributos HTML e chaves DOMStringMap. A regra exata evita divergências discretas em seletores, eventos, análises, testes e hidratação.
Por exemplo, data-release--channel vira release-Channel: o primeiro hífen fica porque é seguido por outro hífen; o segundo some porque vem antes de c minúsculo. Você pode usá-la como referência rápida ou como etapa de validação em geradores e pipelines.
Casos de uso
Escreva acesso DOM a partir da marcação
Transforme um atributo data-* copiado na chave exata usada depois de element.dataset em JavaScript.
Gere atributos no servidor
Converta propriedades dataset de um esquema da aplicação em nomes de atributos para templates HTML.
Valide testes e seletores
Mantenha atributos HTML, verificações dataset e seletores CSS alinhados às regras do navegador.
Perguntas frequentes
É igual a um conversor genérico de kebab-case para camelCase?
Não. Ele segue as regras de caracteres do dataset no DOM e preserva sinais que um conversor genérico removeria.
Por que uma propriedade com hífen pode ser recusada na volta?
Um hífen seguido por letra ASCII minúscula viola a condição do DOM e impede o retorno ao mesmo nome.
Dígitos e sublinhados são aceitos?
Sim. Eles permanecem; apenas maiúsculas ASCII e pares qualificáveis de hífen e minúscula mudam.
Por que um nome sem data- no início é recusado?
Porque só atributos que começam com data- têm uma propriedade correspondente no dataset. Recusar os demais pega a tempo nomes de classe, atributos comuns ou trechos incompletos antes que cheguem ao seu código.
O que acontece com dois hífens seguidos?
Só some o hífen que vem logo antes de uma letra minúscula. Em data-release--channel o primeiro hífen fica, porque é seguido de outro hífen, e o segundo sai antes do c: o resultado é release-Channel.
Ferramentas relacionadas
Para desenvolvedores — acesso via API
Tudo nesta página está disponível via API. Esta seção é para equipes que querem integrar a ferramenta aos próprios sistemas; quem não precisa disso pode simplesmente usar a ferramenta acima.
Endpoint
Autenticação por token Bearer. Um único POST coloca a tarefa na fila; o resultado chega por webhook ou link assinado.
Chame do seu código
curl -X POST https://api.kit.forhosting.com/web/data-attribute-camel-convert \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"text":"data-user-profile-id","direction":"attribute_to_property"}'const res = await fetch("https://api.kit.forhosting.com/web/data-attribute-camel-convert", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"text": "data-user-profile-id",
"direction": "attribute_to_property"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/web/data-attribute-camel-convert",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"text": "data-user-profile-id",
"direction": "attribute_to_property"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/data-attribute-camel-convert", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"text":"data-user-profile-id","direction":"attribute_to_property"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"text":"data-user-profile-id","direction":"attribute_to_property"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/data-attribute-camel-convert", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Exemplo de requisição
{
"text": "data-user-profile-id",
"direction": "attribute_to_property"
}Exemplo de resposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.data_attribute_camel_convert",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}A API é assíncrona: cada chamada devolve um task_id na hora. Se preferir polling, consulte o status a até 1 requisição por segundo.
Preço
Preço publicado, sem tokens nem créditos escondidos. Tarefa que falha não é cobrada.
Limites
timeout_sec | 30 |
max_crawl_pages | 25 |
Erros
| HTTP | Código | O que significa |
|---|---|---|
401 | unauthorized | Token ausente ou inválido. Confira o header Authorization. |
402 | insufficient_balance | Saldo insuficiente para esta tarefa. Faça uma recarga e tente de novo. |
404 | unknown_type | Esse tipo de tarefa não existe. Confira o campo type no catálogo. |
429 | rate_limited | Muitas requisições em pouco tempo. Espere um instante e tente de novo. |
Notas técnicas
Converta um atributo data de HTML em propriedade dataset
A resposta traz output, data_attribute e dataset_property, facilitando a identificação das duas representações por pessoas e sistemas.
Converta uma propriedade dataset novamente em atributo HTML
Portanto, userProfileId vira data-user-profile-id e apiV2Endpoint vira data-api-v2-endpoint.
Use as regras exatas do DOM em vez de conversão genérica
Esta capacidade é determinística, não acessa a rede, não armazena conteúdo e entrega o mesmo resultado no navegador e na API. Na automação, envie text e direction e interprete invalid_input como prefixo incorreto ou mapeamento inverso não reversível. Cada solicitação da API custa US$ 0,002.
Perguntas técnicas
O que acontece se o atributo não começar com data-?
A conversão direta retorna invalid_input, pois somente atributos data-* correspondem a propriedades dataset.
Quanto custa a API?
Cada solicitação custa US$ 0,002. Você também pode fazer conversões avulsas no navegador.