Cómo usar esta herramienta para desarrolladores
- Pega el HTML.
- Elige el orden.
- Pulsa “Extraer clases”.
- Revisa nombres y frecuencias.
HTML Class Name Extractor
Extrae nombres de clase utilizados en HTML, calcula su frecuencia y genera una lista ordenada para inventarios CSS, migraciones de componentes o revisión de convenciones de nomenclatura.
Datos de entrada
Entrada localEspacio publicitario
Qué hace esta herramienta para desarrolladores
Parsea todos los elementos con atributo class y cuenta cada token de clase separado según las reglas del DOM.
La salida puede ordenarse alfabéticamente o por frecuencia. Se conservan caracteres válidos tal como aparecen en classList.
No comprueba si las clases tienen reglas CSS asociadas ni analiza clases generadas dinámicamente por JavaScript.
Ejemplo
Entrada:
<div class="card featured"> <h2 class="card__title">Título</h2> <p class="text-muted featured">Texto</p> </div>
Ejecuta la herramienta para obtener un resultado coherente con este contenido.
Casos de uso
- Inventario CSS
- Migración de frameworks
- Auditoría de componentes
- Limpieza de nomenclatura
Consejos para obtener resultados fiables
- Usa la frecuencia para detectar utilidades muy repetidas.
- Compara el inventario con tu CSS para buscar clases huérfanas.
- Revisa convenciones BEM o utilitarias por separado.
- Incluye el HTML renderizado por plantillas si quieres un inventario realista.
Detalles del procesamiento
La salida puede ordenarse alfabéticamente o por frecuencia. Se conservan caracteres válidos tal como aparecen en classList. Parsea todos los elementos con atributo class y cuenta cada token de clase separado según las reglas del DOM.
No comprueba si las clases tienen reglas CSS asociadas ni analiza clases generadas dinámicamente por JavaScript.
Preguntas frecuentes
¿Cuenta una clase repetida en varios elementos?
Sí. La frecuencia indica cuántas apariciones tiene cada token de clase.
¿Cómo trata varias clases en un mismo atributo?
El DOM las separa en tokens individuales mediante classList.
¿Detecta clases añadidas con JavaScript?
No, salvo que ya estén presentes en el HTML pegado.
¿Comprueba si una clase existe en CSS?
No. Solo extrae y cuenta clases del marcado HTML.
¿Puedo ordenar por frecuencia?
Sí. Hay una opción para priorizar las clases más utilizadas.
Herramientas relacionadas para desarrolladores
Resumen técnico
| Aspecto | Detalle |
|---|---|
| Procesamiento | Local en el navegador |
| Entrada | Texto pegado o archivo local |
| Salida | TXT |
Explorar HTML, CSS y JavaScript
Consulta más utilidades de esta categoría.
Ver categoría