HTML 태그를 HTML 엔티티로 이스케이프하는 가장 빠른 방법은 무엇입니까?

나는 일을 포함하는 크롬 확장 프로그램 쓰고 있어요 많은 문자열 살균 : 다음 작업을 할 수 변환하여, HTML 태그를 포함 <, >과 &에 <, >그리고 &각각을,.

(즉, PHP와 동일 htmlspecialchars(str, ENT_NOQUOTES)합니다. 큰 따옴표 문자를 변환 할 필요가 없다고 생각합니다.)

이것은 내가 지금까지 찾은 가장 빠른 기능입니다.

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-entitiesreplace 함수를 반복적 으로 호출하고 Dmitrij가 제안한 DOM 메서드를 사용하는 것과 비교 합니다.

당신의 길은 더 빠른 것 같습니다 ...

그래도 왜 필요합니까?

이를 수행 할 수있는 한 가지 방법은 다음과 같습니다.

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

더 빠르고 / 짧은 솔루션은 다음과 같습니다.

escaped = new Option(html).innerHTML

이것은 Option 요소가 이러한 종류의 자동 이스케이프를 수행하는 생성자를 유지하는 JavaScript의 이상한 흔적과 관련이 있습니다.

https://github.com/jasonmoo/t.js/blob/master/t.js에 대한 크레딧

AngularJS 소스 코드에는 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;');
}

가장 빠른 방법은 다음과 같습니다.

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

이 방법은 'replace'를 기반으로하는 방법보다 약 두 배 빠릅니다 . http://jsperf.com/htmlencoderegex/35를 참조하십시오 .

출처 : https://stackoverflow.com/a/17546215/698168

올인원 스크립트 :

// 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 / underscore 이스케이프 기능을 사용하는 것이 좋습니다 .

" 를 처리하는 단일 함수로서의 Martijn의 방법 mark ( 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하면 자식 Text 노드가있는 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 () 사용에 문제가 있습니까?