前端开发工作中,经常需要将HTML的左右尖括号等转义成实体形式。我们不能把<,>,&等直接显示在最终看到的网页里。需要将其转义后才能在网页上显示。

转义字符(Escape Sequence)也称字符实体(Character Entity)。定义转义字符串的主要原因是

  1. “<”和“>”等符号已经用来表示HTML TAG,因此不能直接当作文本中的符号来使用。但有时需求是在HTML页面上使用这些符号,所以需要定义它的转义字符串。
  2. 有些字符在ASCII字符集中没有定义(如版权符号“©”)。因此需要使用转义字符(“©”对应的转义字符是“&copy;”)来表示。

这里提供两个函数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中跑)。

将HTML特殊转义为实体字符的两种实现方式的更多相关文章

  1. Java的IO操作中有面向字节(Byte)和面向字符(Character)两种方式

    解析:Java的IO操作中有面向字节(Byte)和面向字符(Character)两种方式.面向字节的操作为以8位为单位对二进制的数据进行操作,对数据不进行转换,这些类都是InputStream和Out ...

  2. C++多字节字符转换为宽字符的两种方法

    目前知道有两种方式:可以提供宽字符与ANSI字符之间的转换, 第一种由COM库提供的函数 char*  _com_util::ConvertBSTRToString(BSTR ); BSTR _com ...

  3. JavaScript 区分中英文字符的两种方法: 正则和charCodeAt()方法

    正则无疑是最强大的判断各种条件的方法, 最近也在研习它, 虽然枯燥, 但仍有乐趣. 用它来判断一个双字节的中文字符也是轻而易举地. 而判断中文字符,  简单且执行效率高. regExpForm.onb ...

  4. js实现从字符串中查找出现次数最多的字符的两种解决办法

    方法一:正则表达式匹配 var str = "adadfdfseffserfefsefseeffffftsdg"; ; var result = ""; whi ...

  5. JS区分中英文字符的两种方法: 正则和charCodeAt()方法

    1.正则regExpForm.onblur=function(){ entryVal=this.value; entryLen=entryVal.length; cnChar=entryVal.mat ...

  6. Dynamics CRM2013/2015 检索实体属性的两种方式

    昨天有朋友问起如何查询一个字段属性是否存在于某个实体中,一般这个问题我们会采取最直观的查询方式即MetadataBrowser,该工具是一个zip解决方案包在SDK中的如下目录内"\SDK\ ...

  7. xml转json和实体类的两种方式

    本文为博主原创,未经允许不得转载: xml在http通信中具有较高的安全性和传输速度,所以应用比较广泛, 在项目中往往需要对xml,json和实体类进行相互转换,在这里总结一下自己所用到的一些方法: ...

  8. (转)Android EditText限制输入字符的5种实现方式

    最近项目要求限制密码输入的字符类型, 例如不能输入中文.   现在总结一下EditText的各种实现方式,  以比较各种方法的优劣. 第一种方式:  设置EditText的inputType属性,可以 ...

  9. Html一些特殊字符(Html语法字符)的一种表达方式

      空格 & & < < > > " " &qpos; '

随机推荐

  1. ADO.NET学习系列(二)

    这次我使用ADO.NET来插入一条数据,到数据库中.主用到存储过程.我不想每次都是用SQL文本的形式了,那样始终没有进步--- 下面首先,我把我这次练习要用到的数据库脚本,贴出来: USE maste ...

  2. Linux各版本的本地root密码破解方法

    (一)RedHat/CentOS/Fedora 系统密码破解 1.在grub选项菜单按E进入编辑模式 2.编辑kernel 那行最后加上S (或者Single) 3.按B,启动到single-user ...

  3. 重构13天 抽取方法对象(Extract Method Object)

    理解:本文中的“提取方法对象”是指当你发现一个方法中存在过多的局部变量时,你可以通过使用“提取方法对象”重构来引入一些方法,每个方法完成任务的一个步骤,这样可以使得程序变得更具有可读性. 详解:如下代 ...

  4. .Net 配置文件——继承ConfigurationSection实现自定义处理类处理自定义配置节点

    除了使用继承IConfigurationSectionHandler的方法定义处理自定义节点的类,还可以通过继承ConfigurationSection类实现同样效果. 首先说下.Net配置文件中一个 ...

  5. Java编码规范

    1. Java命名约定 除了以下几个特例之外,命名时应始终采用完整的英文描述符.此外,一般应采用小写字母,但类名.接口名以及任何非初始单词的第一个字母要大写.1.1 一般概念 n 尽量使用完整 ...

  6. HTML5 语义元素

    返回目录 http://hovertree.com/h/bjaf/html5zixueji.htm 一个语义元素能够清楚的描述其意义给浏览器和开发者.无语义 元素实例: <div> 和 & ...

  7. Python入门版

    一.前言 陆陆续续学习Python已经近半年时间了,感觉到Python的强大之外,也深刻体会到Python的艺术.哲学.曾经的约定,到现在才兑现,其中不乏有很多懈怠,狼狈. Python入门关于Pyt ...

  8. 详细讲解PHP中缓存技术的应用

    PHP,一门最近几年兴起的web设计脚本语言,由于它的强大和可伸缩性,近几年来得到长足的发展,php相比传统的asp网站,在速度上有绝对的优势,想mssql转6万条数据php如需要40秒,asp不下2 ...

  9. 泛函编程(22)-泛函数据类型-Monoid In Action

    在上一节我们讨论了Monoid的结合性和恒等值的作用以及Monoid如何与串类元素折叠算法相匹配.不过我们只示范了一下基础类型(primitive type)Monoid实例的应用,所以上一节的讨论目 ...

  10. 泛函编程(13)-无穷数据流-Infinite Stream

    上节我们提到Stream和List的主要分别是在于Stream的“延后计算“(lazy evaluation)特性.我们还讨论过在处理大规模排列数据集时,Stream可以一个一个把数据元素搬进内存并且 ...