HTMLエンティティとしてHTMLタグをエスケープする最速の方法？

私がやっ含まChromeの拡張機能書いている多くの文字列をサニタイズ：次の仕事のがあります変換することによって、HTMLタグが含まれているが<、>と&に<、>そして&それぞれ。

（言い換えれば、PHPと同じhtmlspecialchars(str, ENT_NOQUOTES)です。二重引用符の文字を変換する必要は実際にはないと思います。）

これは私がこれまでに見つけた最速の関数です：

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

しかし、一度に数千の文字列を実行しなければならない場合には、まだ大きな遅れがあります。

誰でもこれを改善できますか？それが違いを生む場合、それは主に10〜150文字の文字列用です。

（私が持っていたアイデアの1つは、大なり記号をエンコードすることではありませんでした。これには本当に危険があるのでしょうか？）

コールバック関数を渡して置換を実行してみることができます。

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関数を繰り返し呼び出して、Dmitrijによって提案されたDOMメソッドを使用する場合と比較します。

あなたの方法はより速く見える...

なぜそれが必要なのですか？

これを行う方法の1つを次に示します。

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

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

こちらがデモです。

プロトタイプ関数としてのマルティンの方法：

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

これはJavaScriptの奇妙な痕跡に関連しており、Option要素はこの種のエスケープを自動的に行うコンストラクタを保持します。

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」に基づく方法よりも約2倍高速です。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 エスケープ関数を使用することをお勧めします。

ハンドリングを持つ単一の関数としてマルタインの方法」（マークを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の呼び出しが最も高速です。正規表現は最も遅くなります（他のコメントで証明されています）。もちろん、他のブラウザではXMLSerializerの方が高速かもしれませんが、私の（制限された）テストでinnerHTMLは、a が最速です。

最速の1行：

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（）の使用の何が問題になっていますか？