วิธีที่เร็วที่สุดในการหลีกเลี่ยงแท็ก HTML เป็นเอนทิตี HTML?

ผมเขียนส่วนขยายของ Chrome ที่เกี่ยวข้องกับการทำมากของงานดังต่อไปนี้: ฆ่าเชื้อสตริงที่อาจมีแท็ก HTML โดยการแปลง<, >และ&เพื่อ<, >และ&ตามลำดับ

(กล่าวอีกนัยหนึ่งก็เหมือนกับของ PHP htmlspecialchars(str, ENT_NOQUOTES)- ฉันไม่คิดว่าจะต้องมีการแปลงอักขระแบบ double-quote)

นี่เป็นฟังก์ชั่นที่เร็วที่สุดที่ฉันเคยพบ:

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

แต่ยังคงมีความล่าช้าอย่างมากเมื่อฉันต้องวิ่งสองสามพันสายผ่านมันในครั้งเดียว

ใครสามารถปรับปรุงเรื่องนี้ได้บ้าง? ส่วนใหญ่เป็นสตริงระหว่าง 10 ถึง 150 อักขระหากสิ่งนั้นสร้างความแตกต่าง

(ความคิดหนึ่งที่ฉันมีคือไม่ต้องกังวลกับการเข้ารหัสเครื่องหมายที่ใหญ่กว่า - จะมีอันตรายจริงหรือไม่)

คุณสามารถลองส่งผ่านฟังก์ชันโทรกลับเพื่อทำการแทนที่:

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

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

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

นี่คือการทดสอบประสิทธิภาพ: http://jsperf.com/encode-html-entitiesเพื่อเปรียบเทียบกับการเรียกใช้replaceฟังก์ชันซ้ำ ๆ และใช้วิธี DOM ที่ Dmitrij เสนอ

หนทางของคุณน่าจะเร็วกว่า ...

ทำไมคุณถึงต้องการมัน?

วิธีหนึ่งที่คุณสามารถทำได้มีดังนี้

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

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

นี่คือการสาธิต

วิธีการของ Martijn เป็นฟังก์ชันต้นแบบ:

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

วิธีที่เร็วที่สุดคือ:

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

วิธีการนี้จะเป็นเรื่องเกี่ยวกับสองครั้งเร็วกว่าวิธีการขึ้นอยู่กับ 'แทนที่' ดูhttp://jsperf.com/htmlencoderegex/35

ที่มา: https://stackoverflow.com/a/17546215/698168

วิธีแก้ปัญหาที่เร็วขึ้น / สั้นลงคือ:

escaped = new Option(html).innerHTML

สิ่งนี้เกี่ยวข้องกับร่องรอยแปลก ๆ ของ JavaScript โดยที่องค์ประกอบ Option ยังคงเป็นตัวสร้างที่ทำแบบนี้โดยอัตโนมัติ

เครดิตhttps://github.com/jasonmoo/t.js/blob/master/t.js

รหัส AngularJS แหล่งที่มานอกจากนี้ยังมีภายในรุ่นของเชิงมุม-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;');
}

สคริปต์ 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

ฉันไม่แน่ใจว่าทั้งหมดเกี่ยวกับความเร็ว แต่ถ้าคุณกำลังมองหาเรียบง่ายฉันจะแนะนำให้ใช้ lodash / ขีดหลบหนีฟังก์ชั่น

วิธี Martijn เป็นฟังก์ชั่นเดียวกับการจัดการ"เครื่องหมาย ( ใช้ใน JavaScript ):

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

ฉันจะเพิ่มXMLSerializerไปที่กอง ให้ผลลัพธ์ที่เร็วที่สุดโดยไม่ต้องใช้การแคชอ็อบเจ็กต์ใด ๆ (ไม่ใช่บนซีเรียลไลเซอร์หรือบนโหนดข้อความ)

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

โบนัสเพิ่มเติมคือรองรับแอตทริบิวต์ที่ต่อเนื่องกันแตกต่างจากโหนดข้อความ:

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

คุณสามารถดูสิ่งที่กำลังแทนที่ได้โดยการตรวจสอบข้อมูลจำเพาะทั้งสำหรับโหนดข้อความและสำหรับค่าแอตทริบิวต์ค่าแอตทริบิวต์เอกสารฉบับเต็มมีประเภทโหนดมากกว่า แต่แนวคิดเหมือนกัน

สำหรับประสิทธิภาพจะเร็วที่สุดเมื่อไม่ได้แคช เมื่อคุณอนุญาตให้แคชแล้วโทรinnerHTMLใช้ HTMLElement ด้วยโหนดข้อความลูกจะเร็วที่สุด Regex จะช้าที่สุด (ตามที่พิสูจน์แล้วจากความคิดเห็นอื่น ๆ ) แน่นอนว่า XMLSerializer อาจเร็วกว่าในเบราว์เซอร์อื่น ๆ แต่ในการทดสอบ (แบบ จำกัด ) ของฉัน a innerHTMLนั้นเร็วที่สุด

บรรทัดเดียวที่เร็วที่สุด:

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

เร็วที่สุดด้วยการแคช:

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

การแสดงช้าไปหน่อย แต่เกิดอะไรขึ้นกับการใช้encodeURIComponent ()และdecodeURIComponent () ?