Phương pháp nhanh nhất để thoát thẻ HTML dưới dạng thực thể HTML?

Tôi đang viết một phần mở rộng của Chrome mà liên quan đến việc làm một rất nhiều của công việc sau: vệ sinh chuỗi có thể chứa các thẻ HTML, bằng cách chuyển đổi <, >và &để <, >và &, tương ứng.

(Nói cách khác, giống như PHP htmlspecialchars(str, ENT_NOQUOTES)- tôi không nghĩ rằng thực sự cần thiết phải chuyển đổi các ký tự dấu ngoặc kép.)

Đây là chức năng nhanh nhất mà tôi tìm thấy cho đến nay:

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

Nhưng vẫn có độ trễ lớn khi tôi phải chạy vài nghìn chuỗi trong một lần.

Bất cứ ai có thể cải thiện điều này? Nó chủ yếu dành cho các chuỗi từ 10 đến 150 ký tự, nếu điều đó tạo ra sự khác biệt.

(Một ý tưởng của tôi là không bận tâm đến việc mã hóa dấu lớn hơn - liệu có bất kỳ mối nguy hiểm thực sự nào với điều đó không?)

Bạn có thể thử chuyển một hàm gọi lại để thực hiện thay thế:

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

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

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

Đây là bài kiểm tra hiệu suất: http://jsperf.com/encode-html-entities để so sánh với việc gọi replacehàm nhiều lần và sử dụng phương thức DOM do Dmitrij đề xuất.

Cách của bạn dường như nhanh hơn ...

Tuy nhiên, tại sao bạn cần nó?

Đây là một cách bạn có thể làm điều này:

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

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

Đây là một bản demo.

Phương thức của Martijn như một hàm nguyên mẫu:

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

Một giải pháp nhanh hơn / ngắn hơn là:

escaped = new Option(html).innerHTML

Điều này có liên quan đến một số vết tích kỳ lạ của JavaScript, theo đó phần tử Option giữ lại một hàm tạo để thực hiện loại thoát tự động này.

Ghi có vào https://github.com/jasonmoo/t.js/blob/master/t.js

Mã nguồn AngularJS cũng có một phiên bản bên trong 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, '&').
    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;');
}

Phương pháp nhanh nhất là:

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

Phương pháp này nhanh hơn khoảng hai lần so với các phương pháp dựa trên 'thay thế', hãy xem tại http://jsperf.com/htmlencoderegex/35 .

Nguồn: https://stackoverflow.com/a/17546215/698168

Tập lệnh tất cả trong một:

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

Tôi không hoàn toàn chắc chắn về tốc độ, nhưng nếu bạn đang tìm kiếm sự đơn giản, tôi khuyên bạn nên sử dụng hàm thoát lodash / underscore .

Phương thức của Martijn dưới dạng một hàm duy nhất có dấu " xử lý ( sử dụng trong javascript ):

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

Tôi sẽ thêm XMLSerializervào đống. Nó cung cấp kết quả nhanh nhất mà không cần sử dụng bất kỳ bộ nhớ đệm đối tượng nào (không phải trên bộ tuần tự, cũng không phải trên nút Văn bản).

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

Phần thưởng bổ sung là nó hỗ trợ các thuộc tính được tuần tự hóa khác với các nút văn bản:

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

Bạn có thể thấy những gì nó thực sự thay thế bằng cách kiểm tra thông số kỹ thuật, cho cả các nút văn bản và các giá trị thuộc tính . Tài liệu đầy đủ có nhiều loại nút hơn, nhưng khái niệm thì giống nhau.

Đối với hiệu suất, nó nhanh nhất khi không được lưu trong bộ nhớ cache. Khi bạn cho phép lưu vào bộ nhớ đệm, thì việc gọi innerHTMLHTMLElement với nút Văn bản con là nhanh nhất. Regex sẽ chậm nhất (như đã được chứng minh bởi các nhận xét khác). Tất nhiên, XMLSerializer có thể nhanh hơn trên các trình duyệt khác, nhưng trong thử nghiệm (có giới hạn) của tôi, a innerHTMLlà nhanh nhất.

Dòng đơn nhanh nhất:

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

Nhanh nhất với bộ nhớ đệm:

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

Hơi trễ với chương trình, nhưng có gì sai khi sử dụng encodeURIComponent () và decodeURIComponent () ?