将 HTML 标记转义为 HTML 实体的最快方法？

您可以尝试传递一个回调函数来执行替换:

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 方法进行比较。

你的方法似乎更快..。

但你为什么需要它？

你可以这样做:

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


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

这是小样。

All-in-one script:

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

马丁的方法作为一个原型函数:

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

Martijn 的方法作为处理 "标记(在 javascript 中使用)的单一函数:

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

The AngularJS source code also has a version inside of 角消毒.

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

这种方法比基于“替换”的方法快大约两倍，参见 http://jsperf.com/htmlencoderegex/35。

资料来源: https://stackoverflow.com/a/17546215/698168

节目有点晚了，但是使用 encodeURIComponent()和 decodeURIComponent()有什么问题吗？

我对速度不是很确定，但是如果你想要简单，我建议使用 loash/下划线 逃跑函数。

一个更快/更短的解决方案是:

escaped = new Option(html).innerHTML

This is related to some weird vestige of JavaScript whereby the Option element retains a constructor that does this sort of escaping automatically.

归功于 https://github.com/jasonmoo/t.js/blob/master/t.js

我会把 XMLSerializer加进去。它在不使用任何对象缓存(不在序列化程序上，也不在 Text 节点上)的情况下提供最快的结果。

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

通过检查规范，您可以看到它实际上替换了什么，对于 文本节点和 属性值都是如此。完整的文档有更多的节点类型，但概念是相同的。

至于性能，没有缓存时它是最快的。如果允许缓存，那么对具有子 Text 节点的 HTMLElement 调用 innerHTML是最快的。正则表达式是最慢的(其他评论证明了这一点)。当然，XMLSerializer 在其他浏览器上可能更快，但在我(有限的)测试中，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