将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
}

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

比较:

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

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



相关阅读:
百度地图API应用之获取用户的具体位置
C/C++实现字符串模糊匹配
Windows8下设置蓝牙配对的操作步骤
详解MySQL的用户密码过期功能
Android开发之Button事件实现与监听方法总结
C# web api返回类型设置为json的两种方法
php实现查看邮件是否已被阅读的方法
jQuery统计上传文件大小的方法
当用户退出点击浏览器后退仍可回到原来页面的解决方案
C#将jpg转换为pdf的方法
JavaScript实现的GBK、UTF8字符串实际长度计算函数
本月底将停售 Win8/Win8.1专业版升级包和介质包
Win8.1更新时提示错误代码为80246010的解决方案
C语言练习题:自由落体的小球简单实例
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 2015幼师筑梦中国心得体会 初中初二作文450字:读课文《乌塔》有感 游香港海洋公园1200字 经典英语爱情语录 我恨你的眼睛,你的嘴唇,你的拥抱,恨你不喜爱我 三位80后IT创业精英回顾2012谈感想 2014年6月教师工作总结 我用平淡的眼神看你 记忆中秋作文800字 作文写你和书的故事 我永远陪在你身边 企业委托书范文大全 无谓的争吵 运输公司工作总结 运输公司安全总结 体验盲人作文 我们班的辣妹作文450字 曲终人散 来自风的启迪作文 大学生入党积极分子学习十八届三中全会心得体会 试论社会主义新农村建设进程中的农村集贸市场 加西亚.马尔克斯:不孤独的人生 我学会了洗衣服作文500字 世界如此复杂你要内心强大如此安好 班级卫生建议书 经典语句一生受益的定律 注定要错过 在职人员的入党申请书范文1000字_入党申请书 2015纪律教育学习月活动动员演讲稿 成全是一种美德 那么,请忘了吧,在下一秒 与鱼共舞作文350字 酒业公司开业贺词 最新2014话务员实习报告范文集锦 《毛主席在花山》读后感500字 吹肥皂泡真有趣450字 我们还缺少一颗自我反省的心 你是幸运的 万类霜天竞自由——拜读王继良老师画作随感 恶魔在身边 农业部部长杜青林谈农业和农村经济工作 企业端午节活动总结 进度 保质量 优环境 确保项目如期通车 人贵无语——电影《英雄无语》观后感 秋夜情魂 局办公室主任2006年上半年个人工作总结 《假如给我三天光明》 龙虎山上的猴和树 手机连电脑上网方法 显而易见却视而不见 一个中午 香荷凋残

Copyright © 2016 phpStudy |