将HTML的左右尖括号等转义成实体形式的两种实现方式


Posted in Javascript onMay 04, 2014

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

Javascript 相关文章推荐
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
Mar 12 Javascript
纯js分页代码(简洁实用)
Nov 05 Javascript
详解javascript实现瀑布流绝对式布局
Jan 29 Javascript
JavaScript解八皇后问题的方法总结
Jun 12 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 Javascript
Vue计算属性的使用
Aug 04 Javascript
基于webpack 实用配置方法总结
Sep 28 Javascript
vue中的适配px2rem示例代码
Nov 19 Javascript
解决layer.prompt无效的问题
Sep 24 Javascript
vue实现计算器功能
Feb 22 Javascript
OpenLayers3实现图层控件功能
Sep 25 Javascript
浅谈node.js中间件有哪些类型
Apr 29 Javascript
IE6-8中Date不支持toISOString的修复方法
May 04 #Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
May 04 #Javascript
JavaScript获取图片的原始尺寸以宽度为例
May 04 #Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
May 04 #Javascript
使用JavaScript获取电池状态的方法
May 03 #Javascript
JavaScript打印网页指定区域的例子
May 03 #Javascript
js检测输入内容全为空格的方法
May 03 #Javascript
You might like
PHP 字符串操作入门教程
2006/12/06 PHP
抓取YAHOO股票报价的类
2009/05/15 PHP
PHP Session变量不能传送到下一页的解决方法
2009/11/27 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
document.all与WEB标准
2020/05/13 Javascript
半角全角相互转换的js函数
2009/10/16 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
2015/06/04 Javascript
iScroll.js 使用方法参考
2016/05/16 Javascript
浅析JavaScript中break、continue和return的区别
2016/11/30 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
2018/10/12 Javascript
bootstrap中的导航条实例代码详解
2019/05/20 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
Vue中实现回车键切换焦点的方法
2020/02/19 Javascript
Vue实现随机验证码功能
2020/12/29 Vue.js
python备份文件的脚本
2008/08/11 Python
python getopt 参数处理小示例
2009/06/09 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
python实现反转部分单向链表
2018/09/27 Python
python selenium执行所有测试用例并生成报告的方法
2019/02/13 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
Python通过TensorFLow进行线性模型训练原理与实现方法详解
2020/01/15 Python
Top Villas美国:豪华别墅出租和度假屋
2018/07/10 全球购物
时尚孕妇装:Ingrid & Isabel
2019/05/08 全球购物
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
武汉高蓝德国际.net机试
2016/06/24 面试题
最新的咖啡店创业计划书
2013/12/30 职场文书
文明青少年标兵事迹材料
2014/01/28 职场文书
《三峡》教学反思
2014/03/01 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android
Golang 字符串的常见操作
2022/04/19 Golang