Il metodo più veloce per sfuggire ai tag HTML come entità HTML?

Sto scrivendo un'estensione Chrome che coinvolge facendo un sacco di lavoro seguente: sanificazione stringhe che potrebbero contenere tag HTML, convertendo <, >e &per <, >e &, rispettivamente.

(In altre parole, lo stesso di PHP htmlspecialchars(str, ENT_NOQUOTES)- non penso che ci sia alcuna reale necessità di convertire i caratteri di virgolette doppie.)

Questa è la funzione più veloce che ho trovato finora:

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

Ma c'è ancora un grande ritardo quando devo eseguire alcune migliaia di stringhe in una volta sola.

Qualcuno può migliorare su questo? È principalmente per stringhe tra 10 e 150 caratteri, se questo fa la differenza.

(Un'idea che avevo era di non preoccuparmi di codificare il segno di maggiore di - ci sarebbe stato un vero pericolo con quello?)

Potresti provare a passare una funzione di callback per eseguire la sostituzione:

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

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

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

Ecco un test delle prestazioni: http://jsperf.com/encode-html-entities da confrontare con la chiamata replaceripetuta della funzione e l'utilizzo del metodo DOM proposto da Dmitrij.

La tua strada sembra essere più veloce ...

Perché ne hai bisogno, però?

Ecco un modo per farlo:

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

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

Ecco una demo.

Il metodo di Martijn come funzione 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 soluzione ancora più rapida / breve è:

escaped = new Option(html).innerHTML

Ciò è correlato ad alcune strane vestigia di JavaScript per cui l'elemento Option mantiene un costruttore che esegue questo tipo di escape automaticamente.

Ringraziamo https://github.com/jasonmoo/t.js/blob/master/t.js

Il codice sorgente di AngularJS ha anche una versione all'interno di 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;');
}

Il metodo più veloce è:

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

Questo metodo è circa due volte più veloce dei metodi basati su "replace", vedere http://jsperf.com/htmlencoderegex/35 .

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

Script all-in-one:

// 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

Non sono del tutto sicuro della velocità, ma se stai cercando semplicità ti suggerirei di usare la funzione di escape lodash / underscore .

Il metodo di Martijn come singola funzione con manipolazione " mark ( utilizzando in javascript ):

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

Aggiungerò XMLSerializeralla pila. Fornisce il risultato più veloce senza utilizzare alcun oggetto di memorizzazione nella cache (non sul serializzatore, né sul nodo Testo).

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

Il vantaggio aggiuntivo è che supporta attributi serializzati in modo diverso rispetto ai nodi di testo:

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

Puoi vedere cosa sta effettivamente sostituendo controllando le specifiche, sia per i nodi di testo che per i valori degli attributi . La documentazione completa ha più tipi di nodo, ma il concetto è lo stesso.

Per quanto riguarda le prestazioni, è il più veloce quando non è memorizzato nella cache. Quando si consente la memorizzazione nella cache, la chiamata innerHTMLa un HTMLElement con un nodo di testo figlio è più veloce. Regex sarebbe il più lento (come dimostrato da altri commenti). Ovviamente, XMLSerializer potrebbe essere più veloce su altri browser, ma nei miei (limitati) test, a innerHTMLè il più veloce.

Riga singola più veloce:

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

Più veloce con la memorizzazione nella cache:

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 po 'tardi per lo spettacolo, ma cosa c'è di sbagliato nell'usare encodeURIComponent () e decodeURIComponent () ?