Cómo usar esta herramienta para desarrolladores
- Pega el HTML.
- Pulsa “Extraer data-*”.
- Revisa atributos, valores y etiquetas.
HTML Data Attribute Extractor
Extrae atributos personalizados data-* de un documento HTML, agrupa sus nombres y valores y muestra en qué etiquetas aparecen. Sirve para revisar contratos entre HTML y JavaScript, controladores declarativos y metadatos embebidos.
Datos de entrada
Entrada localEspacio publicitario
Qué hace esta herramienta para desarrolladores
Recorre todos los atributos de los elementos HTML y selecciona aquellos cuyo nombre comienza por data-.
Se preserva el nombre exacto del atributo y su valor textual. La salida JSON incluye etiqueta, atributo y valor por cada aparición.
No interpreta automáticamente tipos, JSON embebido ni semántica de librerías como Stimulus, Alpine o HTMX.
Ejemplo
Entrada:
<button data-action="save" data-user-id="42">Guardar</button> <div data-controller="modal" data-state="closed"></div>
Ejecuta la herramienta para obtener un resultado coherente con este contenido.
Casos de uso
- Auditar contratos DOM/JS
- Documentar componentes
- Migrar controladores declarativos
- Inspeccionar metadatos HTML
Consejos para obtener resultados fiables
- Mantén nombres data-* coherentes y documentados.
- Evita almacenar secretos en atributos HTML.
- Convierte tipos explícitamente en JavaScript.
- Revisa duplicidades semánticas entre data-* y clases.
Detalles del procesamiento
Se preserva el nombre exacto del atributo y su valor textual. La salida JSON incluye etiqueta, atributo y valor por cada aparición. Recorre todos los atributos de los elementos HTML y selecciona aquellos cuyo nombre comienza por data-.
No interpreta automáticamente tipos, JSON embebido ni semántica de librerías como Stimulus, Alpine o HTMX.
Preguntas frecuentes
¿Incluye cualquier atributo que empiece por data-?
Sí, siempre que esté presente en el HTML analizado.
¿Convierte data-user-id a dataset.userId?
La salida principal conserva el nombre HTML original para evitar ambigüedad.
¿Analiza valores JSON dentro de data-*?
No. Los valores se tratan como texto.
¿Puede mostrar atributos de elementos sin contenido visible?
Sí. Se recorren elementos independientemente de su contenido.
¿Detecta atributos añadidos dinámicamente?
No, salvo que estén incluidos en el HTML pegado.
Herramientas relacionadas para desarrolladores
Resumen técnico
| Aspecto | Detalle |
|---|---|
| Procesamiento | Local en el navegador |
| Entrada | Texto pegado o archivo local |
| Salida | JSON |
Explorar HTML, CSS y JavaScript
Consulta más utilidades de esta categoría.
Ver categoría