Conversor de HTML y cadenas JS

Funciones

• Las dos direcciones: HTML → cadena JS y cadena JS → HTML
• Detecta la dirección a partir de la entrada (`<` es HTML, una comilla es cadena JS), o elígela tú
• Parte `</` en `<\/` por defecto, lo que evita un `</script>` prematuro
• Tres estilos de comilla: simple, doble e inversa (la inversa también escapa `${` y las propias comillas inversas)
• Tres formas de salida: la cadena suelta, `const html = …` o `document.write(…)`
• Escapa saltos de línea, tabuladores, barras invertidas y los separadores de línea U+2028 / U+2029
• El desescapado entiende `\n` `\t` `\xHH` `\uHHHH` `\u{…}` y las continuaciones de línea
• Los escapes desconocidos conservan su barra invertida: puede que hayas pegado una expresión regular

Cómo se usa

1. Pega HTML, o una cadena JS entre comillas
2. Deja Dirección en Detectar, o elige una
3. Elige el estilo de comilla y la forma de salida; el resultado se actualiza al momento
4. Copia el resultado: está listo para pegar en código

Preguntas frecuentes

¿Por qué convertir </ en <\/?

Porque dentro de una etiqueta `<script>` el analizador HTML solo busca la secuencia de caracteres `</script` en el código fuente, sin importarle si está dentro de una cadena JS. Así que cualquier HTML incrustado que contenga `</script>` cierra la etiqueta justo ahí: el JS restante pasa a ser texto en la página y el mensaje de error apunta a otro sitio. En una cadena JS `\/` y `/` son el mismo valor, así que partirlo no cambia la salida: es la única forma de alterar el código sin alterar el valor.

¿Comillas simples o dobles?

Depende del contenido. Los atributos HTML suelen usar comillas dobles (`class="btn"`), así que meter HTML dentro de una cadena entre comillas simples necesita muchos menos escapes y se lee mejor; por eso la simple es la predeterminada. Las comillas inversas (plantillas) se ven más limpias, pero obligan a escapar `${` (que si no se interpola) y las propias comillas inversas.

¿Cómo se detecta la dirección?

Con una única prueba: ¿la entrada empieza por `<` una vez recortada? Eso significa que es marcado. La prueba inversa —¿parece esto una cadena JS escapada?— es demasiado débil, porque casi cualquier texto puede parecerlo, y equivocarse significa desescapar tu prosa como si fuera código (un `\n` literal se vuelve un salto real) de una forma invisible después. Así que solo se detecta un lado; el otro elígelo a mano.

¿Por qué algunos escapes se dejan igual?

El desescapado solo trata los escapes con significado definido en JS: `\n` `\t` `\b` `\f` `\v` `\0`, `\xHH`, `\uHHHH`, `\u{…}`, y los propios caracteres de comilla y barra invertida. Cualquier otro (`\d`, `\q`) conserva su barra invertida en vez de perderla: puede que hayas pegado una expresión regular, y quitar la barra convierte `\d` en `d`, que significa otra cosa.