本文介绍了在前端开发中将HTML特殊字符转义和反转义的两种方法，包括使用映射表和正则替换的方式，以及利用浏览器DOM API的技巧。这两种方法各有优缺点，映射表方式灵活性高，可自定义转义字符，而DOM API方式代码简洁，但适用环境有限。
前端开发工作中，经常需要将HTML的左右尖括号等转义成实体形式。我们不能把，&等直接显示在最终看到的网页里。需要将其转义后才能在网页上显示。
“”等符号已经用来表示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中跑)。
Java的IO操作中有面向字节(Byte)和面向字符(Character)两种方式
解析:Java的IO操作中有面向字节(Byte)和面向字符(Character)两种方式.面向字节的操作为以8位为单位对二进制的数据进行操作,对数据不进行转换,这些类都是InputStream和Out ...
C++多字节字符转换为宽字符的两种方法
目前知道有两种方式:可以提供宽字符与ANSI字符之间的转换, 第一种由COM库提供的函数 char* _com_util::ConvertBSTRToString(BSTR ); BSTR _com ...
JavaScript 区分中英文字符的两种方法: 正则和charCodeAt()方法
正则无疑是最强大的判断各种条件的方法, 最近也在研习它, 虽然枯燥, 但仍有乐趣. 用它来判断一个双字节的中文字符也是轻而易举地. 而判断中文字符, 简单且执行效率高. regExpForm.onb ...
js实现从字符串中查找出现次数最多的字符的两种解决办法
方法一:正则表达式匹配 var str = "adadfdfseffserfefsefseeffffftsdg"; ; var result = ""; whi ...
JS区分中英文字符的两种方法: 正则和charCodeAt()方法
1.正则regExpForm.οnblur=function(){ entryVal=this.value; entryLen=entryVal.length; cnChar=entryVal.mat ...
Dynamics CRM2013/2015 检索实体属性的两种方式
昨天有朋友问起如何查询一个字段属性是否存在于某个实体中,一般这个问题我们会采取最直观的查询方式即MetadataBrowser,该工具是一个zip解决方案包在SDK中的如下目录内"\SDK\ ...
xml转json和实体类的两种方式
本文为博主原创,未经允许不得转载: xml在http通信中具有较高的安全性和传输速度,所以应用比较广泛, 在项目中往往需要对xml,json和实体类进行相互转换,在这里总结一下自己所用到的一些方法: ...
(转)Android EditText限制输入字符的5种实现方式
最近项目要求限制密码输入的字符类型, 例如不能输入中文. 现在总结一下EditText的各种实现方式, 以比较各种方法的优劣. 第一种方式: 设置EditText的inputType属性,可以 ...
随机推荐
C#导入Excel遇到数字字母混合列数据丢失解决
错误重现: ----------------------------------------------------------------------- 在导入Excel读取数据时,其中的一个字段保 ...
LTMP手动编译安装以及全自动化部署实践(附详细代码)
大家使用LNMP架构,一般可以理解为Linux Shell为CentOS/RadHat/Fedora/Debian/Ubuntu/等平台安装LNMP(Nginx/MySQL /PHP),LNMPA(N ...
关于IOS中的delegate必须知道的事情
当你开始写iOS程式不久,应该开始面对到很多的delegate, 不管是用别人的library或是自己写library,可能都逃不了delegate. 为了怕有些人不知道什么是delegate,在这边 ...
ImageLoader(多线程网络图片加载)+本地缓存 for windowsphone 7
搞了好长一阵子wp,做点好事. C/S手机app中应用最多的是 获取网络图片,缓存到本地,展示图片 本次主要对其中的delay:LowProfileImageLoader进行修改,在获取图片的时候, ...
关于Excel Networkdays方法的实现
最近一个程序要求excel输出的日期差为Networkdays. 在网上找了下,没有找到很好的具体实现方法. 要说明的是,微软的Microsoft.Office.Interop.Excel已经实现的N ...
chrome浏览器默认样式覆盖input背景
问题描述:input表单添加了背景图片,结果自动填充是,编程了一个淡黄色矩形方框. 解决方案:网上查询了很多的解决方式,基本都不管用,这里我简单说两个. 1.去除黄色背景 input:-webkit- ...
IP地址分类及特殊IP地址
A类:0xxx xxxx.x.x.x/8,即1~127,共126个可用. 因0.x.x.x表示所有网络:127.x.x.x/8用作回环地址,作为测试TCP/IP协议的地址. =>其中10.x.x ...
Linux 中如何用源代码安装软件，以及如何卸载它
https://www.linuxidc.com/Linux/2017-12/149839.htm http://www.openssh.com/ http://www.openssh.com/por ...
Being a Good Boy in Spring Festival HDU - 1850
桌子上有M堆扑克牌:每堆牌的数量分别为Ni(i=1…M):两人轮流进行:每走一步可以任意选择一堆并取走其中的任意张牌:桌子上的扑克全部取光,则游戏结束:最后一次取牌的人为胜者. 现在我们不想研究到底先 ...
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
