将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中跑)。
将HTML特殊转义为实体字符的两种实现方式的更多相关文章
- 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.onblur=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属性,可以 ...
- Html一些特殊字符(Html语法字符)的一种表达方式
空格 & & < < > > " " &qpos; '
随机推荐
- 微软参考源代码 referencesource.microsoft.com
微软参考源代码 http://referencesource.microsoft.com/ referencesource 下载地址 https://github.com/Microsoft/refe ...
- C#设计模式——模板方法(Template Method)
一.概述在软件开发中,对某一项操作往往有固定的算法结构,而具体的子步骤会因为不同的需要而有所不同.如何可以在稳定算法结构的同时来灵活应对子步骤变化的需求呢?二.模板方法模板方法是一种常见的设计模式,它 ...
- 自定义ConfigurationSection,创建多个嵌套的ConfigurationElementCollection节点
由于接口地址都是固定的,所以想到使用自定义节点,来将接口都配置到web.config中. 很快,v1.0版本出炉: public class RequestConfigSection : Config ...
- PHP功能齐全的发送邮件类
下面这个类的功能则很强大,不但能发html格式的邮件,还可以发附件 <?php class Email { //---设置全局变量 var $mailTo = ""; // ...
- VS "15" 预览 5 中 VB 15 新增的功能
VS "15" 预览 5 给 VB 带来了更新.这次的更新内容有3个: * 值元组 ValueTuple这个功能能把一组计算结果成组返回.为了使用这个功能,我们要安装 System ...
- dapper的增、删、查改的CodeSmith模板
<%@ Template Language="C#" TargetLanguage="Text" %> <%@ Property Name=& ...
- 基于UML项目的分析与设计
1,概述 项目中需求和设计的文档是必然的,UML工具可以帮助指导我们从不同的角度去看待一个新的系统,并把这个系统分解剖析出来.本篇文章主要讲述的是如何将UML应用到项目的开发工作中,关于如何学习UML ...
- angular $http 请求数据的时候加载loading
1.目录结构 2.页面加载时效果(加载的时候比较难截图,是页面上方出现一条进度条,然后我另加了一个Loading..的提示,请忽略那个table) 3.页面加载完成后效果 4.index.html & ...
- 同源策略 JSONP(实践篇)
JSONP详解 json相信大家都用的多,jsonp我就一直没有机会用到,但也经常看到,只知道是“用来跨域的”,一直不知道具体是个什么东西.今天总算搞明白了.下面一步步来搞清楚jsonp是个什么玩意. ...
- c# Json Dictionary序列化和反序列化
说明:Dictionary对象本身不支持序列化和反序列化,需要定义一个继承自Dictionary, IXmlSerializable类的自定义类来实现该功能.感觉完全可以把这样的类封装到C#库中,很具 ...