¿Cuál es el equivalente de HtmlSpecialChars en JavaScript?

Resuelto Bart van Heukelom asked hace 15 años • 18 respuestas

Aparentemente, esto es más difícil de encontrar de lo que pensaba. Y aun así es tan simple...

¿Existe una función equivalente a htmlspecialchars de PHP integrada en JavaScript? Sé que es bastante fácil implementarlo usted mismo, pero usar una función incorporada, si está disponible, es simplemente mejor.

Para aquellos que no están familiarizados con PHP, htmlspecialchars traduce cosas como <htmltag/>en&lt;htmltag/&gt;

Lo sé escape()y encodeURI()no trabajo de esta manera.

Bart van Heukelom avatar Nov 24 '09 08:11 Bart van Heukelom
Aceptado

Hay un problema con su código de solución: solo escapará de la primera aparición de cada carácter especial. Por ejemplo:

escapeHtml('Kip\'s <b>evil</b> "test" code\'s here');
Actual:   Kip&#039;s &lt;b&gt;evil</b> &quot;test" code's here
Expected: Kip&#039;s &lt;b&gt;evil&lt;/b&gt; &quot;test&quot; code&#039;s here

Aquí hay un código que funciona correctamente:

function escapeHtml(text) {
  return text
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;");
}

Actualizar

El siguiente código producirá resultados idénticos al anterior, pero funciona mejor, particularmente en grandes bloques de texto (gracias jbo5112 ).

function escapeHtml(text) {
  var map = {
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#039;'
  };
  
  return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}
Kip avatar Jan 29 '2011 05:01 Kip

Eso es codificación HTML. No existe una función nativa de JavaScript para hacer eso, pero puedes buscar en Google y obtener algunas muy bien hechas.

Por ejemplo, http://sanzon.wordpress.com/2008/05/01/neat-little-html-encoding-trick-in-javascript/

EDITAR:
Esto es lo que he probado:

var div = document.createElement('div');
  var text = document.createTextNode('<htmltag/>');
  div.appendChild(text);
  console.log(div.innerHTML);

Producción:&lt;htmltag/&gt;

o.k.w avatar Nov 24 '2009 02:11 o.k.w