Convierta atributos data a camelCase
Pase de un atributo data de HTML a su nombre en dataset de JavaScript, en ambos sentidos: data-user-profile-id se convierte en userProfileId y userProfileId vuelve a ser data-user-profile-id, con las mismas reglas que aplica el navegador. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Ejemplo resuelto
- Texto
- data-user-profile-id
- Dirección
- Attribute to property
- Producción
- userProfileId
- Entrada
- data-user-profile-id
- Atributo data
- data-user-profile-id
- Propiedad dataset
- userProfileId
Los atributos de datos personalizados de HTML usan nombres como data-user-profile-id, mientras JavaScript expone el mismo valor mediante una propiedad camelCase de dataset, como userProfileId. Este conversor aplica las reglas del navegador en ambos sentidos para que usted pase del marcado al código DOM sin adivinar dónde van los guiones. Elija la dirección, introduzca un nombre y obtenga ambas formas. La conversión directa rechaza expresamente los nombres sin el prefijo data- obligatorio y detecta entradas incompletas antes de que lleguen a su aplicación.
Convierta un atributo data de HTML en una propiedad dataset
Seleccione atributo a propiedad cuando parta de marcado, una plantilla o un atributo copiado de las herramientas del navegador. La entrada debe comenzar por data-; por ejemplo, data-user-profile-id se convierte en userProfileId. El proceso sigue el algoritmo DOM, no una regla genérica para cambiar mayúsculas.
Primero normaliza las mayúsculas ASCII del atributo. Después elimina el prefijo data- y sustituye cada guion seguido inmediatamente de una letra ASCII minúscula por esa letra en mayúscula. Los guiones restantes, números, puntos, guiones bajos y caracteres no ASCII se conservan.
Por ello, data-build-2-id produce build-2Id: no se consume el guion anterior a 2, pero sí el anterior a i. Si falta el prefijo, se devuelve un error en vez de un resultado engañoso.
Convierta una propiedad dataset de nuevo en atributo HTML
Seleccione propiedad a atributo cuando parta de JavaScript, como element.dataset.userProfileId, y necesite el nombre correspondiente para HTML, selectores CSS, pruebas o plantillas del servidor. El conversor añade data-, inserta un guion delante de cada mayúscula ASCII y la transforma en minúscula. Los números y la puntuación permanecen en su lugar.
El algoritmo inverso del DOM impone una condición importante: la propiedad no puede contener ya un guion seguido de una letra ASCII minúscula. user-profile sería ambiguo, pues la conversión directa consumiría el guion y devolvería userProfile. La herramienta informa del problema como entrada no válida, en lugar de fingir que el recorrido es reversible. Un guion seguido de un número, una mayúscula o un carácter no ASCII sí puede convertirse.
La respuesta conserva también la propiedad original para facilitar la comparación.
Use las reglas exactas del DOM, no una conversión genérica
Un formateador camelCase genérico suele tratar espacios, guiones bajos y signos repetidos como separadores equivalentes. El mapeo dataset de JavaScript no funciona así: es una transformación precisa de caracteres que conecta atributos HTML con claves DOMStringMap. Aplicar la regla exacta evita diferencias sutiles en selectores, eventos, analítica, pruebas e hidratación.
Por ejemplo, data-release--channel se convierte en release-Channel: el primer guion permanece porque le sigue otro guion, y el segundo desaparece porque le sigue una c minúscula. Puede usarla como referencia interactiva o como validación en generadores y procesos de compilación.
Qué puede hacer con ella
Escriba acceso DOM desde marcado
Convierta un atributo data-* copiado en la clave exacta que necesita después de element.dataset en JavaScript.
Genere atributos en el servidor
Pase propiedades dataset de un esquema de aplicación a nombres de atributo para plantillas HTML.
Valide pruebas y selectores
Mantenga coordinados los atributos HTML, las aserciones dataset y los selectores CSS con las reglas del navegador.
Preguntas frecuentes
¿Equivale a un conversor genérico de kebab-case a camelCase?
No. Aplica las reglas de caracteres de dataset del DOM y conserva signos que otro conversor podría eliminar.
¿Por qué puede rechazarse una propiedad con guion al invertir?
Un guion seguido de una letra ASCII minúscula incumple la condición del DOM y no volvería al mismo nombre.
¿Admite números y guiones bajos?
Sí. Se conservan; solo cambian las mayúsculas ASCII y los pares válidos de guion y minúscula.
¿Por qué se rechaza un nombre que no empieza por data-?
Porque solo los atributos que empiezan por data- tienen una propiedad equivalente en dataset. Rechazar los demás detecta a tiempo nombres de clase, atributos corrientes o fragmentos incompletos antes de que lleguen a su código.
¿Qué pasa con dos guiones seguidos?
Solo desaparece el guion que va justo antes de una letra minúscula. En data-release--channel el primer guion se queda porque le sigue otro guion, y el segundo se elimina ante la c: el resultado es release-Channel.
Herramientas relacionadas
Para desarrolladores — acceso por API
Todo lo de esta página está disponible por programación. Esta sección es para equipos que quieren integrarlo en sus sistemas; el resto puede usar la herramienta de arriba sin más.
Endpoint de API
¿Prefiere automatizarlo? Un POST autenticado crea la tarea; el resultado llega por webhook o enlace firmado. La misma capacidad también se ejecuta aquí en la web, por email y desde Telegram — y pronto también desde nuestra app.
Llámela desde su stack
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)Ejemplo de solicitud
{
"text": "data-user-profile-id",
"direction": "attribute_to_property"
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.data_attribute_camel_convert",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}La API es asíncrona: la llamada devuelve un task_id al instante y el resultado llega por webhook. El polling está limitado a 1 req/s por tarea.
Precio
Precio publicado — sin tokens ni créditos inventados. Una tarea fallida no se cobra.
Límites
timeout_sec | 30 |
max_crawl_pages | 25 |
Errores
| HTTP | Código | Significado |
|---|---|---|
401 | unauthorized | API key ausente o inválida. |
402 | insufficient_balance | El saldo no cubre el precio de la tarea. |
404 | unknown_type | El tipo de tarea no existe. |
429 | rate_limited | Demasiadas peticiones. Use el webhook en vez de sondear. |
Notas técnicas
Convierta un atributo data de HTML en una propiedad dataset
La respuesta contiene output y los campos explícitos data_attribute y dataset_property para que personas y programas distingan ambas representaciones.
Convierta una propiedad dataset de nuevo en atributo HTML
Así, userProfileId pasa a data-user-profile-id y apiV2Endpoint a data-api-v2-endpoint.
Use las reglas exactas del DOM, no una conversión genérica
Esta capacidad es determinista, no usa la red ni almacena datos y ofrece el mismo resultado en el navegador y por API. Al automatizar, envíe text y direction y trate invalid_input como señal de prefijo incorrecto o de una conversión inversa no reversible. Cada solicitud de API cuesta $0.002.
Preguntas técnicas
¿Qué ocurre si el atributo no empieza por data-?
La conversión directa devuelve invalid_input, porque solo los atributos data-* corresponden a propiedades dataset.
¿Cuánto cuesta la API?
Cada solicitud cuesta $0.002. También puede realizar conversiones puntuales en el navegador.