Saltar al contenido
TextArray1.41.0
Totalmente local

Convertidor de HTML a JSX

Convierta el marcado HTML en JSX y pueda pegarlo directamente en un componente de React.

Entrada
Salida
Herramientas relacionadas
Formateador HTMLHerramientas de desarrollador
Convertidor de objetos CSS a JSHerramientas de desarrollador
Convertidor de HTML a BBCodeHerramientas de desarrollador
Eliminar MarkdownLimpieza de texto
diferencia clave i18nHerramientas de desarrollador
Convertidor de TOML a JSONHerramientas de desarrollador
Convertidor de HTML a JSX
Pegue el marcado HTML y obtenga JSX que puede colocar directamente en un componente de React. El convertidor cambia el nombre de cada atributo para el que React espera un nombre diferente: clase se convierte en nombre de clase, for se convierte en htmlFor, tabindex se convierte en tabIndex, colspan se convierte en colSpan y docenas más, por lo que la consola deja de advertir sobre propiedades DOM desconocidas en el momento en que pega un fragmento copiado de una herramienta de diseño, una exportación de CMS, una plantilla de correo electrónico o una página estática antigua.
Los estilos en línea son lo siguiente que React rechaza como una cadena simple. Active "Convertir estilo en objeto" y style="color:red;font-size:16px" se convierte en style={{ color: 'red', fontSize: '16px' }}, con cada propiedad camelCased y cada valor citado, listo para la propiedad de estilo. Los elementos vacíos son el tercer inconveniente: HTML le permite dejar <br>, <img>, <input>, <hr> y <meta> sin cerrar, pero JSX no los analizará, por lo que "Elementos vacíos de cierre automático" los reescribe como <br />, <img /> y así sucesivamente.
Los comentarios HTML se convierten en la única forma de comentario que JSX acepta dentro del marcado, por lo que <!-- así --> se convierte en {/* así */}. El contenido del texto, los espacios en blanco y los saltos de línea permanecen exactamente como los escribió, por lo que su sangría y copia sobreviven intactas a la conversión, y los atributos data-* y aria-* se dejan deliberadamente con guiones porque JSX los mantiene como están. Ambas opciones están activadas de forma predeterminada y se pueden desactivar cuando solo desea cambiar el nombre del atributo.
Toda la conversión ocurre en su navegador como un simple procesamiento de cadenas: sin DOM, sin servidor, sin carga. Pegue el marcado propietario desde un panel de administración interno o el sitio de un cliente y nada saldrá de su dispositivo. Copie el JSX, descárguelo como un archivo o envíelo a otra herramienta TextArray para el siguiente paso.
Preguntas frecuentes
¿A qué atributos cambia el nombre?
class → className, for → htmlFor, y los formularios camelCase que React espera: tabIndex, readOnly, maxLength, colSpan, rowSpan, cellPadding, crossOrigin, autoFocus, contentEditable, srcSet y muchos más. Los atributos data-* y aria-* se dejan exactamente como están, porque JSX los mantiene separados por guiones.
¿Convierte estilos en línea?
Sí, cuando "Convertir estilo en objeto" está activado. Cada declaración se convierte en una clave camelCased con un valor de cadena entre comillas dentro de un objeto de estilo de doble llave. Desactive la opción para dejar las cadenas de estilo intactas.
¿Es este un analizador HTML completo?
No, es una transformación rápida de cadenas, no un DOM del navegador. Cubre las conversiones que React realmente necesita: cambios de nombre de atributos, estilos en línea, elementos vacíos y comentarios. No vuelve a sangrar ni valida su HTML, por lo que las etiquetas con formato incorrecto aparecen tal como están escritas.
¿Mi HTML está subido a alguna parte?
No. La conversión se ejecuta completamente en su navegador con procesamiento de cadenas local. Su marcado nunca llega a un servidor, por lo que pegar el código interno o del cliente es seguro.