将HTML的左右尖括号等转义成实体形式的两种实现方式

前端技术 2023/09/10 JavaScript
前端开发工作中，经常需要将HTML的左右尖括号等转义成实体形式。我们不能把<，>，&等直接显示在最终看到的网页里。需要将其转义后才能在网页上显示。

转义字符（Escape Sequence）也称字符实体(Character Entity)。定义转义字符串的主要原因是

“<”和“>”等符号已经用来表示HTML TAG，因此不能直接当作文本中的符号来使用。但有时需求是在HTML页面上使用这些符号，所以需要定义它的转义字符串。
有些字符在ASCII字符集中没有定义（如版权符号“©”）。因此需要使用转义字符（“©”对应的转义字符是“©”）来表示。

这里提供两个函数escape和unescape，分别实现将HTML转义为实体和回转。

方式一、一个映射表+正则替换
复制代码 代码如下:

var keys = Object.keys || function(obj) {
obj = Object(obj)
var arr = []
for (var a in obj) arr.push(a)
return arr
}
var invert = function(obj) {
obj = Object(obj)
var result = {}
for (var a in obj) result[obj[a]] = a
return result
}
var entityMap = {
escape: {
\'&\': \'&\',
\'<\': \'<\',
\'>\': \'>\',
\'\"\': \'\"\',
\"\'\": \'\'\'
}
}
entityMap.unescape = invert(entityMap.escape)
var entityReg = {
escape: RegExp(\'[\' + keys(entityMap.escape).join(\'\') + \']\', \'g\'),
unescape: RegExp(\'(\' + keys(entityMap.unescape).join(\'|\') + \')\', \'g\')
}

// 将HTML转义为实体
function escape(html) {
if (typeof html !== \'string\') return \'\'
return html.replace(entityReg.escape, function(match) {
return entityMap.escape[match]
})
}
// 将实体转回为HTML
function unescape(str) {
if (typeof str !== \'string\') return \'\'
return str.replace(entityReg.unescape, function(match) {
return entityMap.unescape[match]
})
}

方式二、利用浏览器DOM API
复制代码 代码如下:

// 将HTML转义为实体
function escape(html){
var elem = document.createElement(\'div\')
var txt = document.createTextNode(html)
elem.appendChild(txt)
return elem.innerHTML;
}
// 将实体转回为HTML
function unescape(str) {
var elem = document.createElement(\'div\')
elem.innerHTML = str
return elem.innerText || elem.textContent
}

有个缺陷是只能转义“< > & ”，对于单引号，双引号都不转义。另外一些非ASCII也不能转义。选择时须注意。

比较：

方式1 代码量较大，但灵活性，完整性都比方式2强。可根据需求添加或减少映射表entityMap，且可以运行在任意JS环境中。

方式2 为hack方式，代码量少很多，利用浏览器内部API就行了转义和转回（主流浏览器都支持）。不具完整性，很明显只能在浏览器环境中使用（比如不能在Node.js中跑）。

本文地址：https://www.stayed.cn/item/26649

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案