Najszybsza metoda zmiany znaczenia tagów HTML jako encji HTML?

Piszę rozszerzenie Chrome, która polega robi wiele z następujących stanowisk: odkażające łańcuchów, które mogą zawierać znaczniki HTML, konwertując <, >i &do <, >i &, odpowiednio.

(Innymi słowy, to samo, co PHP htmlspecialchars(str, ENT_NOQUOTES)- nie sądzę, aby istniała potrzeba konwertowania znaków podwójnego cudzysłowu).

To najszybsza funkcja, jaką do tej pory znalazłem:

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

Ale wciąż jest duże opóźnienie, kiedy muszę przepuścić kilka tysięcy strun za jednym razem.

Czy ktoś może to poprawić? Dotyczy to głównie łańcuchów zawierających od 10 do 150 znaków, jeśli to robi różnicę.

(Jeden pomysł, jaki miałem, to nie zawracać sobie głowy kodowaniem znaku większego niż - czy byłoby z tym jakieś realne niebezpieczeństwo?)

Możesz spróbować przekazać funkcję zwrotną, aby wykonać zamianę:

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

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

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

Oto test wydajności: http://jsperf.com/encode-html-entities do porównania z replacewielokrotnym wywoływaniem funkcji i przy użyciu metody DOM zaproponowanej przez Dmitrija.

Twoja droga wydaje się szybsza ...

Dlaczego jednak tego potrzebujesz?

Oto jeden sposób, w jaki możesz to zrobić:

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

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

Oto demo.

Metoda Martijna jako funkcja prototypowa:

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;"

Jeszcze szybszym / krótszym rozwiązaniem jest:

escaped = new Option(html).innerHTML

Jest to związane z pewnym dziwnym śladem JavaScript, w którym element Option zachowuje konstruktor, który wykonuje tego rodzaju ucieczki automatycznie.

Kredyt dla https://github.com/jasonmoo/t.js/blob/master/t.js

Kod źródłowy AngularJS ma również wersję wewnątrz 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;');
}

Najszybszą metodą jest:

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

Ta metoda jest około dwa razy szybsza niż metody oparte na „zamianie”, patrz http://jsperf.com/htmlencoderegex/35 .

Źródło: https://stackoverflow.com/a/17546215/698168

Skrypt „wszystko w jednym”:

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

Nie jestem do końca pewien co do szybkości, ale jeśli szukasz prostoty, sugerowałbym użycie funkcji ucieczki lodash / podkreślenia .

Metoda Martijna jako pojedyncza funkcja z obsługą znaku „ ( używanego w javascript ):

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

Dodam XMLSerializerdo stosu. Zapewnia najszybszy wynik bez korzystania z buforowania obiektów (nie w serializatorze ani w węźle tekstowym).

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

Dodatkową zaletą jest to, że obsługuje atrybuty, które są serializowane inaczej niż węzły tekstowe:

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

Możesz zobaczyć, co faktycznie zastępuje, sprawdzając specyfikację, zarówno dla węzłów tekstowych , jak i dla wartości atrybutów . Pełna dokumentacja zawiera więcej typów węzłów, ale koncepcja jest taka sama.

Jeśli chodzi o wydajność, jest najszybszy, gdy nie jest buforowany. Jeśli zezwolisz na buforowanie, wywołanie innerHTMLelementu HTMLElement z podrzędnym węzłem tekstowym jest najszybsze. Regex byłby najwolniejszy (co udowodniono w innych komentarzach). Oczywiście XMLSerializer mógłby być szybszy na innych przeglądarkach, ale w moich (ograniczonych) testach a innerHTMLjest najszybszy.

Najszybsza pojedyncza linia:

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

Najszybszy z buforowaniem:

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

Trochę za późno na przedstawienie, ale co jest złego w używaniu encodeURIComponent () i decodeURIComponent () ?