html 尖括号转换,将HTML的左右尖括号等转义成实体形式的两种实现方式_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中跑)。

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值