Metode tercepat untuk melepaskan tag HTML sebagai entitas HTML?

Saya menulis ekstensi Chrome yang melibatkan melakukan banyak pekerjaan berikut: membersihkan string yang mungkin berisi tag HTML, dengan mengonversi <, >dan &menjadi <, >dan &, masing-masing.

(Dengan kata lain, sama seperti PHP htmlspecialchars(str, ENT_NOQUOTES)- saya rasa tidak ada kebutuhan nyata untuk mengonversi karakter kutip ganda.)

Ini adalah fungsi tercepat yang saya temukan sejauh ini:

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

Tapi masih ada kelambatan besar ketika saya harus menjalankan beberapa ribu string sekaligus.

Adakah yang bisa memperbaiki ini? Ini sebagian besar untuk string antara 10 dan 150 karakter, jika itu membuat perbedaan.

(Satu gagasan yang saya miliki adalah untuk tidak repot-repot menyandikan tanda lebih besar dari - apakah ada bahaya nyata dengan itu?)

Anda dapat mencoba meneruskan fungsi callback untuk melakukan penggantian:

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

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

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

Berikut ini adalah uji kinerja: http://jsperf.com/encode-html-entities untuk dibandingkan dengan memanggil replacefungsi berulang kali, dan menggunakan metode DOM yang diusulkan oleh Dmitrij.

Jalanmu sepertinya lebih cepat ...

Mengapa Anda membutuhkannya?

Inilah salah satu cara Anda dapat melakukan ini:

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

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

Berikut demo nya.

Metode Martijn sebagai fungsi prototipe:

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

Solusi yang lebih cepat / lebih singkat adalah:

escaped = new Option(html).innerHTML

Ini terkait dengan beberapa sisa JavaScript yang aneh di mana elemen Option mempertahankan konstruktor yang melakukan pelolosan semacam ini secara otomatis.

Penghargaan untuk https://github.com/jasonmoo/t.js/blob/master/t.js

Kode sumber AngularJS juga memiliki versi di dalam 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;');
}

Metode tercepat adalah:

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

Metode ini sekitar dua kali lebih cepat daripada metode berdasarkan 'ganti', lihat http://jsperf.com/htmlencoderegex/35 .

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

Skrip 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

Saya tidak sepenuhnya yakin tentang kecepatan, tetapi jika Anda mencari untuk kesederhanaan saya akan menyarankan menggunakan / garis bawah lodash melarikan diri fungsi.

Metode Martijn sebagai fungsi tunggal dengan penanganan tanda " ( menggunakan dalam javascript ):

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

Saya akan menambahkan XMLSerializerke tumpukan. Ini memberikan hasil tercepat tanpa menggunakan cache objek apa pun (bukan pada serializer, atau pada node Teks).

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

Bonus tambahannya adalah mendukung atribut yang diserialkan secara berbeda dari node teks:

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

Anda dapat melihat apa yang sebenarnya diganti dengan memeriksa spesifikasi, baik untuk node teks dan untuk nilai atribut . Dokumentasi lengkap memiliki lebih banyak tipe node, tetapi konsepnya sama.

Untuk kinerja, ini yang tercepat saat tidak di-cache. Jika Anda mengizinkan caching, maka memanggil innerHTMLHTMLElement dengan node Teks anak adalah yang tercepat. Regex akan menjadi yang paling lambat (seperti yang dibuktikan oleh komentar lain). Tentu saja, XMLSerializer bisa lebih cepat di browser lain, tetapi dalam pengujian (terbatas) saya, yang innerHTMLtercepat.

Garis tunggal tercepat:

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

Tercepat dengan 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

Agak terlambat untuk pertunjukan, tapi apa salahnya menggunakan encodeURIComponent () dan decodeURIComponent () ?