将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 相关文章推荐
自己使用js/jquery写的一个定制对话框控件
May 02 Javascript
js获取字符串最后一位方法汇总
Nov 13 Javascript
JSONObject使用方法详解
Dec 17 Javascript
一种新的javascript对象创建方式Object.create()
Dec 28 Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 Javascript
Node.js 使用命令行工具检查更新
Jun 08 Javascript
Postman的下载及安装教程详解
Oct 16 Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 Javascript
详解wepy开发小程序踩过的坑(小结)
May 22 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 多进程 解决难题
2009/06/22 PHP
PHP下利用shell后台运行PHP脚本,并获取该脚本的Process ID的代码
2011/09/19 PHP
解析CodeIgniter自定义配置文件
2013/06/18 PHP
PHP使用file_get_contents发送http请求功能简单示例
2018/04/29 PHP
PHP实现微信退款功能
2018/10/02 PHP
详解php中生成标准uuid(guid)的方法
2019/04/28 PHP
Jvascript学习实践案例(开发常用)
2012/06/25 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
2014/01/02 Javascript
javascript关于继承解析
2016/05/10 Javascript
AngularJS ng-mousedown 指令
2016/08/02 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
jQuery实现的表格展开伸缩效果实例
2016/09/07 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
JavaScript日期对象(Date)基本用法示例
2017/01/18 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
Angular2里获取(input file)上传文件的内容的方法
2017/09/05 Javascript
详解动画插件wow.js的使用方法
2017/09/13 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
nodejs 生成和导出 word的实例代码
2018/07/31 NodeJs
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
[00:08]DOTA2勇士令状等级奖励“天外飞星”
2019/05/24 DOTA
进一步探究Python的装饰器的运用
2015/05/05 Python
python使用pandas实现数据分割实例代码
2018/01/25 Python
Django框架使用mysql视图操作示例
2019/05/15 Python
Python中的几种矩阵乘法(小结)
2019/07/10 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
Transpose 数组行列转置的限制方式
2020/02/11 Python
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
意大利和国际最佳时尚品牌:Drestige
2019/12/28 全球购物
写给女朋友的道歉信
2014/01/12 职场文书
出生医学证明样本
2014/01/17 职场文书
新闻专业学生的自我评价
2014/02/13 职场文书
法人授权委托书范本
2014/09/17 职场文书
技术入股合作协议书
2016/03/21 职场文书