将将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 ”
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
}
weixin_38704786
- 粉丝: 12
- 资源: 1001
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- ARM Cortex-A(armV7)编程手册V4.0.pdf
- ABB机器人保养总结解析.ppt
- 【超详细图解】菜鸡如何理解双向链表的python代码实现
- 常用网络命令的使用 ipconfig ping ARP FTP Netstat Route Tftp Tracert Telnet nslookup
- 基于单片机控制的DC-DC变换电路
- RS-232接口电路的ESD保护.pdf
- linux下用time(NULL)函数和localtime()获取当前时间的方法
- Openstack用户使用手册.docx
- KUKA KR 30 hA,KR 60 hA机器人产品手册.pdf
- Java programming with JNI
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0