将HTML的左右尖括号等转义实体形式的两种实现⽅式
前端开发⼯作中,经常需要将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 ''pdf转html
place(entityReg.escape, function(match) {
return entityMap.escape[match]
})
}
// 将实体转回为HTML
function unescape(str) {
if (typeof str !== 'string') return ''
place(entityReg.unescape, function(match) {
return entityMap.unescape[match]
})
}
⽅式⼆、利⽤浏览器DOM API
复制代码代码如下:
// 将HTML转义为实体
function escape(html){
var elem = ateElement('div')
var txt = ateTextNode(html)
elem.appendChild(txt)
return elem.innerHTML;
}
// 将实体转回为HTML
function unescape(str) {
var elem = ateElement('div')
elem.innerHTML = str
return elem.innerText || Content
}
有个缺陷是只能转义“< > & ”,对于单引号,双引号都不转义。另外⼀些⾮ASCII也不能转义。选择时须注意。
⽐较:
⽅式1 代码量较⼤,但灵活性,完整性都⽐⽅式2强。可根据需求添加或减少映射表entityMap,且可以运⾏在任意JS环境中。
⽅式2 为hack⽅式,代码量少很多,利⽤浏览器内部API就⾏了转义和转回(主流浏览器都⽀持)。不具完整性,很明显只能在浏览器环境中使⽤(⽐如不能在Node.js中跑)。