Schnellste Methode, um HTML-Tags als HTML-Entitäten zu umgehen?

Ich schreibe eine Chrome - Erweiterung , die eine beinhaltet dabei viel von dem folgenden Job: Hygienisierung Zeichenfolge , die möglicherweise HTML - Tags enthalten, durch die Umwandlung <, >und &zu <, >und &sind.

(Mit anderen Worten, genau wie bei PHP htmlspecialchars(str, ENT_NOQUOTES)- ich glaube nicht, dass es wirklich notwendig ist, doppelte Anführungszeichen zu konvertieren.)

Dies ist die schnellste Funktion, die ich bisher gefunden habe:

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

Aber es gibt immer noch eine große Verzögerung, wenn ich ein paar tausend Saiten auf einmal durchlaufen muss.

Kann jemand das verbessern? Es ist meistens für Zeichenfolgen zwischen 10 und 150 Zeichen, wenn das einen Unterschied macht.

(Eine Idee, die ich hatte, war, sich nicht die Mühe zu machen, das Größer-als-Zeichen zu verschlüsseln - würde das eine echte Gefahr darstellen?)

Sie können versuchen, eine Rückruffunktion zu übergeben, um den Austausch durchzuführen:

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

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

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

Hier ist ein Leistungstest: http://jsperf.com/encode-html-entities zum Vergleich mit dem replacewiederholten Aufrufen der Funktion und der Verwendung der von Dmitrij vorgeschlagenen DOM-Methode.

Dein Weg scheint schneller zu sein ...

Warum brauchst du es aber?

Hier ist eine Möglichkeit, wie Sie dies tun können:

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

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

Hier ist eine Demo.

Martijns Methode als Prototypfunktion:

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

Der AngularJS-Quellcode enthält auch eine Version in 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;');
}

Die schnellste Methode ist:

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

Diese Methode ist ungefähr doppelt so schnell wie die auf 'Ersetzen' basierenden Methoden, siehe http://jsperf.com/htmlencoderegex/35 .

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

Eine noch schnellere / kürzere Lösung ist:

escaped = new Option(html).innerHTML

Dies hängt mit einem seltsamen Überbleibsel von JavaScript zusammen, bei dem das Option-Element einen Konstruktor behält, der diese Art der automatischen Escape-Funktion ausführt.

Gutschrift an https://github.com/jasonmoo/t.js/blob/master/t.js

All-in-One-Skript:

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

Bei der Geschwindigkeit bin ich mir nicht ganz sicher, aber wenn Sie nach Einfachheit suchen, würde ich die Verwendung der Lodash / Underscore- Escape- Funktion empfehlen .

Martijns Methode als Einzelfunktion mit Handhabung " mark " ( in Javascript ):

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

Ich werde XMLSerializerden Stapel hinzufügen . Es liefert das schnellste Ergebnis ohne Objekt-Caching (weder auf dem Serializer noch auf dem Textknoten).

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

Der zusätzliche Bonus besteht darin, dass Attribute unterstützt werden, die anders als Textknoten serialisiert sind:

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

Sie können sehen, was tatsächlich ersetzt wird, indem Sie die Spezifikation sowohl für Textknoten als auch für Attributwerte überprüfen . Die vollständige Dokumentation enthält mehr Knotentypen, das Konzept ist jedoch dasselbe.

Die Leistung ist am schnellsten, wenn sie nicht zwischengespeichert wird. Wenn Sie das Caching zulassen, ist das Aufrufen innerHTMLeines HTMLElement mit einem untergeordneten Textknoten am schnellsten. Regex wäre am langsamsten (wie aus anderen Kommentaren hervorgeht). Natürlich könnte XMLSerializer in anderen Browsern schneller sein, aber in meinen (eingeschränkten) Tests ist a innerHTMLam schnellsten.

Schnellste einzelne Zeile:

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

Am schnellsten mit Caching:

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

Ein bisschen spät zur Show, aber was ist falsch daran, encodeURIComponent () und decodeURIComponent () zu verwenden ?