发布于 2017-02-04 10:16:17 | 156 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


这篇文章主要介绍了将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中跑)。

最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务