HTML varlıkları olarak HTML etiketlerinden kaçmanın en hızlı yöntemi?

Ben yaptığını içerir bir Chrome uzantısı yazıyorum çok dizeleri sterilize: Aşağıdaki işin olabilir dönüştürerek HTML etiketleri içeren <, >ve &karşı <, >ve &sırasıyla.

(Başka bir deyişle, PHP'dekiyle aynı htmlspecialchars(str, ENT_NOQUOTES)- çift tırnak karakterlerini dönüştürmeye gerçekten ihtiyaç olduğunu sanmıyorum.)

Bu şimdiye kadar bulduğum en hızlı işlev:

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

Ancak tek seferde birkaç bin dizgeyi geçmem gerektiğinde hala büyük bir gecikme var.

Herhangi biri bunu geliştirebilir mi? Çoğunlukla 10 ile 150 karakter arasındaki dizeler için, eğer bu bir fark yaratıyorsa.

(Aklıma gelen bir fikir, büyüktür işaretini kodlamakla uğraşmamaktı - bunda herhangi bir gerçek tehlike olur muydu?)

Değiştirme işlemini gerçekleştirmek için bir geri arama işlevi iletmeyi deneyebilirsiniz:

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

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

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

İşte bir performans testi: http://jsperf.com/encode-html-entities , replaceişlevi tekrar tekrar çağırmakla ve Dmitrij tarafından önerilen DOM yöntemini kullanarak karşılaştırmak için.

Senin yolun daha hızlı görünüyor ...

Neden buna ihtiyacın var?

İşte bunu yapmanın bir yolu:

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

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

İşte bir demo.

Martijn'in prototip işlevi olarak yöntemi:

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

En hızlı yöntem:

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

Bu yöntem, 'değiştir'e dayalı yöntemlerden yaklaşık iki kat daha hızlıdır, bkz. Http://jsperf.com/htmlencoderegex/35 .

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

Daha da hızlı / daha kısa bir çözüm:

escaped = new Option(html).innerHTML

Bu, Option öğesinin bu türden otomatik olarak kaçış yapan bir yapıcıyı tuttuğu bazı garip JavaScript kalıntılarıyla ilgilidir.

Https://github.com/jasonmoo/t.js/blob/master/t.js'ye kredi verin

AngularJS kaynak kodunun ayrıca angular-sanitize.js içinde bir sürümü vardır .

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;');
}

Hepsi bir arada komut dosyası:

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

Hızdan tam olarak emin değilim, ancak basitlik arıyorsanız, lodash / alt çizgi kaçış işlevini kullanmanızı öneririm .

Martijn'in " mark " işlemeli tek işlevli yöntemi ( javascript'te kullanarak ):

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

Yığına ekleyeceğim XMLSerializer. Herhangi bir nesne önbelleği kullanmadan en hızlı sonucu sağlar (serileştiricide veya Metin düğümünde değil).

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

Eklenen bonus, metin düğümlerinden farklı şekilde serileştirilmiş öznitelikleri desteklemesidir:

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

Sen hem, aslında spec kontrol ederek yerine gelen görebilirsiniz metin düğümleri ve için öznitelik değerleri . Tam dokümantasyonda daha fazla düğüm türü vardır, ancak kavram aynıdır.

Performans gelince, önbelleğe alınmadığında en hızlısı. Önbelleğe innerHTMLalmaya izin verdiğinizde, alt Metin düğümüne sahip bir HTMLElement'i çağırmak en hızlısıdır. Regex en yavaş olacaktır (diğer yorumların da kanıtladığı gibi). Elbette, XMLSerializer diğer tarayıcılarda daha hızlı olabilir, ancak benim (sınırlı) testimde a innerHTMLen hızlısıdır.

En hızlı tek hat:

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

Önbelleğe alma ile en hızlı:

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

Gösteriye biraz geç kaldınız , ancak encodeURIComponent () ve decodeURIComponent () kullanmanın nesi yanlış ?