前端开发工作中，经常需要将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中跑）。