¿El método más rápido para escapar de las etiquetas HTML como entidades HTML?

Estoy escribiendo una extensión de Chrome que implica hacer una gran cantidad de trabajo el siguiente: desinfección cadenas que podrían contener etiquetas HTML, mediante la conversión <, >y &a <, >y &, respectivamente.

(En otras palabras, lo mismo que PHP, htmlspecialchars(str, ENT_NOQUOTES)no creo que haya una necesidad real de convertir caracteres de comillas dobles).

Esta es la función más rápida que he encontrado hasta ahora:

function safe_tags(str) {
    return str.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;') ;
}

Pero todavía hay un gran retraso cuando tengo que ejecutar algunos miles de cadenas de una vez.

¿Alguien puede mejorar esto? Es principalmente para cadenas de entre 10 y 150 caracteres, si eso marca la diferencia.

(Una idea que tuve fue no molestarme en codificar el signo mayor que, ¿habría algún peligro real con eso?)

Puede intentar pasar una función de devolución de llamada para realizar el reemplazo:

var tagsToReplace = {
    '&': '&',
    '<': '&lt;',
    '>': '&gt;'
};

function replaceTag(tag) {
    return tagsToReplace[tag] || tag;
}

function safe_tags_replace(str) {
    return str.replace(/[&<>]/g, replaceTag);
}

Aquí hay una prueba de rendimiento: http://jsperf.com/encode-html-entities para comparar con llamar a la replacefunción repetidamente y usar el método DOM propuesto por Dmitrij.

Tu camino parece ser más rápido ...

Sin embargo, ¿por qué lo necesitas?

Aquí tienes una forma de hacer esto:

var escape = document.createElement('textarea');
function escapeHTML(html) {
    escape.textContent = html;
    return escape.innerHTML;
}

function unescapeHTML(html) {
    escape.innerHTML = html;
    return escape.textContent;
}

Aquí tienes una demostración.

El método de Martijn como función prototipo:

String.prototype.escape = function() {
    var tagsToReplace = {
        '&': '&',
        '<': '&lt;',
        '>': '&gt;'
    };
    return this.replace(/[&<>]/g, function(tag) {
        return tagsToReplace[tag] || tag;
    });
};

var a = "<abc>";
var b = a.escape(); // "&lt;abc&gt;"

Una solución aún más rápida / más corta es:

escaped = new Option(html).innerHTML

Esto está relacionado con un extraño vestigio de JavaScript mediante el cual el elemento Option retiene un constructor que hace este tipo de escape automáticamente.

Crédito a https://github.com/jasonmoo/t.js/blob/master/t.js

El código fuente de AngularJS también tiene una versión dentro de angular-sanitize.js .

var SURROGATE_PAIR_REGEXP = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g,
    // Match everything outside of normal chars and " (quote character)
    NON_ALPHANUMERIC_REGEXP = /([^\#-~| |!])/g;
/**
 * Escapes all potentially dangerous characters, so that the
 * resulting string can be safely inserted into attribute or
 * element text.
 * @param value
 * @returns {string} escaped text
 */
function encodeEntities(value) {
  return value.
    replace(/&/g, '&').
    replace(SURROGATE_PAIR_REGEXP, function(value) {
      var hi = value.charCodeAt(0);
      var low = value.charCodeAt(1);
      return '&#' + (((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000) + ';';
    }).
    replace(NON_ALPHANUMERIC_REGEXP, function(value) {
      return '&#' + value.charCodeAt(0) + ';';
    }).
    replace(/</g, '&lt;').
    replace(/>/g, '&gt;');
}

El método más rápido es:

function escapeHTML(html) {
    return document.createElement('div').appendChild(document.createTextNode(html)).parentNode.innerHTML;
}

Este método es aproximadamente dos veces más rápido que los métodos basados ​​en 'reemplazar', consulte http://jsperf.com/htmlencoderegex/35 .

Fuente: https://stackoverflow.com/a/17546215/698168

Secuencia de comandos todo en uno:

// HTML entities Encode/Decode

function htmlspecialchars(str) {
    var map = {
        "&": "&",
        "<": "&lt;",
        ">": "&gt;",
        "\"": "&quot;",
        "'": "&#39;" // ' -> &apos; for XML only
    };
    return str.replace(/[&<>"']/g, function(m) { return map[m]; });
}
function htmlspecialchars_decode(str) {
    var map = {
        "&amp;": "&",
        "&lt;": "<",
        "&gt;": ">",
        "&quot;": "\"",
        "&#39;": "'"
    };
    return str.replace(/(&amp;|&lt;|&gt;|&quot;|&#39;)/g, function(m) { return map[m]; });
}
function htmlentities(str) {
    var textarea = document.createElement("textarea");
    textarea.innerHTML = str;
    return textarea.innerHTML;
}
function htmlentities_decode(str) {
    var textarea = document.createElement("textarea");
    textarea.innerHTML = str;
    return textarea.value;
}

http://pastebin.com/JGCVs0Ts

No estoy del todo seguro acerca de la velocidad, pero si está buscando simplicidad, sugeriría usar la función de escape lodash / underscore .

El método de Martijn como función única con el manejo de la marca " ( usando en javascript ):

function escapeHTML(html) {
    var fn=function(tag) {
        var charsToReplace = {
            '&': '&',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&#34;'
        };
        return charsToReplace[tag] || tag;
    }
    return html.replace(/[&<>"]/g, fn);
}

Agregaré XMLSerializera la pila. Proporciona el resultado más rápido sin utilizar ningún objeto de almacenamiento en caché (ni en el serializador ni en el nodo de texto).

function serializeTextNode(text) {
  return new XMLSerializer().serializeToString(document.createTextNode(text));
}

La ventaja adicional es que admite atributos que se serializan de manera diferente a los nodos de texto:

function serializeAttributeValue(value) {
  const attr = document.createAttribute('a');
  attr.value = value;
  return new XMLSerializer().serializeToString(attr);
}

Puede ver lo que realmente está reemplazando al verificar la especificación, tanto para los nodos de texto como para los valores de los atributos . La documentación completa tiene más tipos de nodos, pero el concepto es el mismo.

En cuanto al rendimiento, es el más rápido cuando no se almacena en caché. Cuando permite el almacenamiento en caché, la llamada innerHTMLa un elemento HTMLElement con un nodo Text secundario es más rápida. Regex sería el más lento (como lo demuestran otros comentarios). Por supuesto, XMLSerializer podría ser más rápido en otros navegadores, pero en mis pruebas (limitadas), a innerHTMLes más rápido.

Línea única más rápida:

new XMLSerializer().serializeToString(document.createTextNode(text));

Más rápido con el almacenamiento en caché:

const cachedElementParent = document.createElement('div');
const cachedChildTextNode = document.createTextNode('');
cachedElementParent.appendChild(cachedChildTextNode);

function serializeTextNode(text) {
  cachedChildTextNode.nodeValue = text;
  return cachedElementParent.innerHTML;
}

https://jsperf.com/htmlentityencode/1

Un poco tarde para el programa, pero ¿qué pasa con el uso de encodeURIComponent () y decodeURIComponent () ?