JavaScript 替换Html标签实现代码


Posted in Javascript onOctober 14, 2009
str = str.<br /> 
replace( /&(?!#?\w+;)/g , '&').<br /> 
replace( /undefinedundefined([^undefinedundefined]*)"/g , '“$1”' ).<br /> 
replace( /</g , '<' ).<br /> 
replace( />/g , '>' ).<br /> 
replace( /…/g , '…' ).<br /> 
replace( /“/g , '“' ).<br /> 
replace( /”/g , '”' ).<br /> 
replace( /‘/g , '‘' ).<br /> 
replace( /'/g , ''' ).<br /> 
replace( /—/g , '—' ).<br /> 
replace( /?/g , '?' );

上面这个还算短了,我看过一些论坛的JS代码,在把Wind Code转换成HTML时,那真是疯子似的写上二三十行。其实我们大可以把这些匹配模式与替换后的字符放到一个哈希中,然后一口气替换掉。
var hash = { 
'<' : '<' , 
'>' : '>', 
'…' : '…', 
'“' : '“' , 
'”' : '”' , 
'‘' : '‘' , 
''' : ''' , 
'—' : '—', 
'?' : '?' 
}; 
str = str. 
replace( /&(?!#?\w+;)/g , '&' ). 
replace( /undefinedundefined([^undefinedundefined]*)"/g , '“$1”' ). 
replace( /[<>…“”‘'—?]/g , function ( $0 ) { 
return hash[ $0 ]; 
});

但这个缺陷也很明显,如哈希的键必须是简单的普通字符串,不能是复杂正则,这就是我们不得不分开的原因。replace在老一点的浏览器是不支持function的。为此,我们只好放弃上面最后那个replace方式,替换方统一为普通字符串。
String.prototype.multiReplace = function ( hash ) { 
var str = this, key; 
for ( key in hash ) { 
if ( Object.prototype.hasOwnProperty.call( hash, key ) ) { 
str = str.replace( new RegExp( key, 'g' ), hash[ key ] ); 
} 
} 
return str; 
};

Object.prototype.hasOwnProperty.call( hash, key )是用来过滤继承自原型的方法与属性的。这样一来,使用就简单了:
str = str.multiReplace({ 
'&(?!#?\\w+;)' :'&', 
'undefinedundefined([^undefinedundefined]*)" : '“$1”', 
'<' : '<' , 
'>' : '>', 
'…' : '…', 
'“' : '“' , 
'”' : '”' , 
'‘' : '‘' , 
''' : ''' , 
'—' : '—', 
'?' : '?' 
});
Javascript 相关文章推荐
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 Javascript
jQuery 三击事件实现代码
Sep 11 Javascript
从零学jquery之如何使用回调函数
May 16 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
May 12 Javascript
JS查找数组中重复元素的方法详解
Jun 14 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
微信小程序icon组件使用详解
Jan 31 Javascript
微信小程序button组件使用详解
Jan 31 Javascript
15分钟深入了解JS继承分类、原理与用法
Jan 19 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 Javascript
从零搭一个自用的前端脚手架的方法步骤
Sep 23 Javascript
JavaScript Dom实现轮播图原理和实例
Feb 19 Javascript
JavaScript null和undefined区别分析
Oct 14 #Javascript
JavaScript iframe的相互操作浅析
Oct 14 #Javascript
使用jQuery简化Ajax开发 Ajax开发入门
Oct 14 #Javascript
jQuery技巧大放送 学习jquery的朋友可以看下
Oct 14 #Javascript
JS+XML 省份和城市之间的联动实现代码
Oct 14 #Javascript
jquery 常用操作整理 基础入门篇
Oct 14 #Javascript
一些技巧性实用js代码小结
Oct 14 #Javascript
You might like
php中用数组的方法设置cookies
2011/04/21 PHP
php实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
php session 写入数据库
2016/02/13 PHP
ThinkPHP 5 AJAX跨域请求头设置实现过程解析
2020/10/28 PHP
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
另一个javascript小测验(代码集合)
2011/07/27 Javascript
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
javascript cookie的简单应用
2016/02/24 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
jQuery remove()过滤被删除的元素(推荐)
2017/07/18 jQuery
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
不使用JavaScript实现菜单的打开和关闭效果demo
2018/05/01 Javascript
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
nodejs dgram模块广播+组播的实现示例
2019/11/04 NodeJs
[28:57]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/16 DOTA
python高手之路python处理excel文件(方法汇总)
2016/01/07 Python
python构建自定义回调函数详解
2017/06/20 Python
Python基于socket实现简单的即时通讯功能示例
2018/01/16 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
python使用Matplotlib画条形图
2020/03/25 Python
[原创]Python入门教程4. 元组基本操作
2018/10/31 Python
python字符串Intern机制详解
2019/07/01 Python
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
2017/07/24 HTML / CSS
canvas实现漂亮的下雨效果的示例
2018/04/18 HTML / CSS
DJI大疆德国官方商城:大疆无人机
2018/09/01 全球购物
英国剑桥包中文官网:The Cambridge Satchel Company中国
2018/11/06 全球购物
Turnbull & Asser官网:英国皇室御用的顶级定制衬衫
2019/01/31 全球购物
NFL官方在线商店:NFLShop
2020/07/29 全球购物
应用服务器有那些
2012/01/19 面试题
护士自荐信
2013/10/25 职场文书
食品科学与工程专业毕业生求职信范文
2014/07/21 职场文书
入党积极分子学习优秀共产党员先进事迹思想汇报
2014/09/13 职场文书
建党伟业电影观后感
2015/06/01 职场文书
婚宴领导致辞
2015/07/28 职场文书
2019七夕节祝福语36句,快来收藏吧
2019/08/06 职场文书