HtmlSpecialChars equivalente en Javascript?

Aparentemente, esto es más difícil de encontrar de lo que pensé que sería. E incluso es tan simple ...

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

Para aquellos que no están familiarizados con PHP, htmlspecialchars traduce cosas como <htmltag/>a<htmltag/>

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

Hay un problema con su código de solución: solo escapará a 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, "&")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;");
}

Actualizar

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

function escapeHtml(text) {
  var map = {
    '&': '&',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#039;'
  };
  
  return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}

Eso es codificación HTML. No hay 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);

Salida: <htmltag/>

Vale la pena leerlo: http://bigdingus.com/2007/12/29/html-escaping-in-javascript/

escapeHTML: (function() {
 var MAP = {
   '&': '&',
   '<': '&lt;',
   '>': '&gt;',
   '"': '&#34;',
   "'": '&#39;'
 };
  var repl = function(c) { return MAP[c]; };
  return function(s) {
    return s.replace(/[&<>'"]/g, repl);
  };
})()

Nota : solo ejecuta esto una vez. Y no lo ejecute en cadenas ya codificadas, por ejemplo, se &convierte en&

Con jQuery puede ser así:

var escapedValue = $('<div/>').text(value).html();

De la pregunta relacionada Escapar cadenas HTML con jQuery

Como se menciona en el comentario, las comillas dobles y las comillas simples se dejan como están para esta implementación. Eso significa que esta solución no debe usarse si necesita hacer un atributo de elemento como una cadena html sin procesar.

Aquí hay una función para escapar de HTML:

function escapeHtml(str)
{
    var map =
    {
        '&': '&',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#039;'
    };
    return str.replace(/[&<>"']/g, function(m) {return map[m];});
}

Y para decodificar:

function decodeHtml(str)
{
    var map =
    {
        '&': '&',
        '&lt;': '<',
        '&gt;': '>',
        '&quot;': '"',
        '&#039;': "'"
    };
    return str.replace(/&amp;|&lt;|&gt;|&quot;|&#039;/g, function(m) {return map[m];});
}

Underscore.js proporciona una función para esto:

_.escape(string)

Se escapa de una cadena para su inserción en HTML, reemplazando &, <,>, "y 'caracteres.

http://underscorejs.org/#escape

No es una función de Javascript incorporada, pero si ya está utilizando Underscore, es una mejor alternativa que escribir su propia función si sus cadenas para convertir no son demasiado grandes.

Otra toma de esto es renunciar a toda la asignación de caracteres por completo y, en cambio, convertir todos los caracteres no deseados en sus respectivas referencias de caracteres numéricos, por ejemplo:

function escapeHtml(raw) {
    return raw.replace(/[&<>"']/g, function onReplace(match) {
        return '&#' + match.charCodeAt(0) + ';';
    });
}

Tenga en cuenta que el RegEx especificado solo maneja los caracteres específicos de los que el OP quería escapar, pero, dependiendo del contexto en el que se utilizará el HTML escapado, estos caracteres pueden no ser suficientes. El artículo de Ryan Grove Hay más en el escape de HTML que &, <,> y " es una buena lectura sobre el tema. Y dependiendo de su contexto, el siguiente RegEx puede ser muy necesario para evitar la inyección de XSS:

var regex = /[&<>"'` !@$%()=+{}[\]]/g

String.prototype.escapeHTML = function() {
        return this.replace(/&/g, "&")
                   .replace(/</g, "&lt;")
                   .replace(/>/g, "&gt;")
                   .replace(/"/g, "&quot;")
                   .replace(/'/g, "&#039;");
    }

muestra:

var toto = "test<br>";
alert(toto.escapeHTML());

Lo más probable es que no necesites esa función. Dado que su código ya está en el navegador *, puede acceder al DOM directamente en lugar de generar y codificar HTML que el navegador tendrá que decodificar hacia atrás para que se use realmente.

Use la innerTextpropiedad para insertar texto sin formato en el DOM de manera segura y mucho más rápida que con cualquiera de las funciones de escape presentadas. Incluso más rápido que asignar una cadena estática precodificada a innerHTML.

Se usa classListpara editar clases, datasetpara establecer data-atributos y setAttributepara otros.

Todos estos se encargarán de escapar por ti. Más precisamente, no se necesita escapar y no se realizará ninguna codificación debajo de **, ya que está trabajando con HTML, la representación textual de DOM.

// use existing element
var author = 'John "Superman" Doe <[email protected]>';
var el = document.getElementById('first');
el.dataset.author = author;
el.textContent = 'Author: '+author;

// or create a new element
var a = document.createElement('a');
a.classList.add('important');
a.href = '/search?q=term+"exact"&n=50';
a.textContent = 'Search for "exact" term';
document.body.appendChild(a);

// actual HTML code
console.log(el.outerHTML);
console.log(a.outerHTML);

.important { color: red; }

<div id="first"></div>

* Esta respuesta no está destinada a usuarios de JavaScript del lado del servidor (Node.js, etc. )

** A menos que lo conviertas explícitamente a HTML real después. Por ejemplo, al acceder innerHTML: esto es lo que sucede cuando ejecuta $('<div/>').text(value).html();sugerido en otras respuestas. Entonces, si su objetivo final es insertar algunos datos en el documento, al hacerlo de esta manera, hará el trabajo dos veces. También puede ver que en el HTML resultante no todo está codificado, solo el mínimo necesario para que sea válido. Se realiza en función del contexto, es por eso que este método jQuery no codifica comillas y, por lo tanto, no debe usarse como un escapista de propósito general. Se necesita el escape de cotizaciones cuando construye HTML como una cadena con datos que no son de confianza o que contienen comillas en el lugar del valor de un atributo. Si usa la API DOM, no tiene que preocuparse por escapar en absoluto.

Para los usuarios de Node.JS (o usuarios que utilizan el tiempo de ejecución de Jade en el navegador), puede usar la función de escape de Jade.

require('jade').runtime.escape(...);

No tiene sentido escribirlo usted mismo si alguien más lo está manteniendo. :)

Estoy elaborando un poco la respuesta de okw.

Puede usar las funciones DOM del navegador para eso.

var utils = {
    dummy: document.createElement('div'),
    escapeHTML: function(s) {
        this.dummy.textContent = s
        return this.dummy.innerHTML
    }
}

utils.escapeHTML('<escapeThis>&')

Esto vuelve <escapeThis>&

Utiliza la función estándar createElementpara crear un elemento invisible, luego usa la función textContentpara establecer cualquier cadena como su contenido y luego innerHTMLpara obtener el contenido en su representación HTML.

function htmlspecialchars(str) {
 if (typeof(str) == "string") {
  str = str.replace(/&/g, "&"); /* must do & first */
  str = str.replace(/"/g, """);
  str = str.replace(/'/g, "'");
  str = str.replace(/</g, "&lt;");
  str = str.replace(/>/g, "&gt;");
  }
 return str;
 }

Espero que esto gane la carrera debido a su rendimiento y lo más importante no a una lógica encadenada usando .replace ('&', '&'). Replace ('<', '<') ...

var mapObj = {
   '&':"&",
   '<':"&lt;",
   '>':"&gt;",
   '"':"&quot;",
   '\'':"&#039;"
};
var re = new RegExp(Object.keys(mapObj).join("|"),"gi");

function escapeHtml(str) 
{   
    return str.replace(re, function(matched)
    {
        return mapObj[matched.toLowerCase()];
    });
}

console.log('<script type="text/javascript">alert('Hello World');</script>');
console.log(escapeHtml('<script type="text/javascript">alert('Hello World');</script>'));

Uno invertido:

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

OWASP recomienda que "[e] xcept para los caracteres alfanuméricos, [debe] escapar de todos los caracteres con valores ASCII inferiores a 256 con el&#xHH; formato (o una entidad con nombre si está disponible) para evitar el cambio de [un] atributo".

Así que aquí hay una función que hace eso, con un ejemplo de uso:

function escapeHTML(unsafe) {
  return unsafe.replace(
    /[\u0000-\u002F]|[\u003A-\u0040]|[\u005B-\u00FF]/g,
    c => '&#' + ('000' + c.charCodeAt(0)).substr(-4, 4) + ';'
  )
}
document.querySelector('div').innerHTML =
  '<span class=' +
  escapeHTML('this should break it! " | / % * + , - / ; < = > ^') +
  '>' +
  escapeHTML('<script>alert("inspect the attributes")\u003C/script>') +
  '</span>'

<div></div>

function htmlEscape(str){
    return str.replace(/[&<>'"]/g,x=>'&#'+x.charCodeAt(0)+';')
}

Esta solución utiliza el código numérico de los caracteres, por ejemplo, <se reemplaza por< .

Aunque su rendimiento es ligeramente peor que la solución que usa un mapa , tiene las ventajas:

• No depende de una biblioteca o DOM
• Bastante fácil de recordar (no necesita memorizar los 5 caracteres de escape HTML)
• Pequeño código
• Razonablemente rápido (sigue siendo más rápido que 5 reemplazos encadenados)