it-swarm.com.de

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

Ich schreibe eine Chrome-Erweiterung, die ein lot der folgenden Aufgabe ausführt: Bereinigen von Zeichenfolgen, die möglicherweise HTML-Tags enthalten, durch Konvertieren von <, > und & in &lt;, &gt; und &amp;.

(Mit anderen Worten, genauso wie htmlspecialchars(str, ENT_NOQUOTES) von PHP - ich glaube nicht, dass es wirklich eine Notwendigkeit gibt, 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;') ;
}

Es gibt jedoch immer noch eine große Verzögerung, wenn ich einige tausend Saiten auf einmal durchlaufen muss. 

Kann jemand das verbessern? Meistens für Strings zwischen 10 und 150 Zeichen, wenn das einen Unterschied macht. 

(Eine Idee, die ich hatte, bestand nicht darin, das Größer-als-Zeichen zu codieren. Gibt es eine echte Gefahr damit?)

87
callum

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

var tagsToReplace = {
    '&': '&amp;',
    '<': '&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 wiederholten Aufrufen der replace-Funktion und Verwenden der von Dmitrij vorgeschlagenen DOM-Methode.

Dein Weg scheint schneller zu sein ...

Warum brauchst du es doch?

70
Martijn

Hier ist eine Möglichkeit, dies zu tun:

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.

83
Web_Designer

Martijns Methode als Prototypfunktion:

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

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

Die schnellste Methode ist:

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

Diese Methode ist etwa doppelt so schnell wie die Methoden, die auf "replace" basieren, siehe http://jsperf.com/htmlencoderegex/35 .

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

8
Julien Kronegg

Der AngularJS-Quellcode hat auch eine Version in angle-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, '&amp;').
    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;');
}
7
Kevin Hakanson

All-in-One-Skript:

// HTML entities Encode/Decode

function htmlspecialchars(str) {
    var map = {
        "&": "&amp;",
        "<": "&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

6
baptx

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

escaped = new Option(html).innerHTML

Dies hängt mit einigen seltsamen Überresten von JavaScript zusammen, wobei das Option-Element einen Konstruktor beibehält, der diese Art der automatischen Escape-Operation ausführt.

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

2
Todd

function encode(r) {
  return r.replace(/[\x26\x0A\x3c\x3e\x22\x27]/g, function(r) {
	return "&#" + r.charCodeAt(0) + ";";
  });
}

test.value=encode('How to encode\nonly html tags &<>\'" Nice & fast!');

/*
 \x26 is &ampersand (it has to be first),
 \x0A is newline,
 \x22 is ",
 \x27 is ',
 \x3c is <,
 \x3e is >
*/
<textarea id=test rows=11 cols=55>www.WHAK.com</textarea>

1
Dave Brown

Ich bin nicht ganz sicher, was Geschwindigkeit angeht, aber wenn Sie nach Einfachheit suchen, würde ich vorschlagen, die Funktion lodash/unterstrichen escape zu verwenden.

0
gilmatic

Martijns Methode als Einzelfunktion mit Handling von "mark (using in Javascript):

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