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 相关文章推荐
javascript的trim,ltrim,rtrim自定义函数
Sep 21 Javascript
JavaScript下申明对象的几种方法小结
Oct 02 Javascript
JS 控制非法字符的输入代码
Dec 04 Javascript
Jquery 高亮显示文本中重要的关键字
Dec 24 Javascript
浅谈Javascript中深复制
Dec 01 Javascript
js中split和replace的用法实例
Feb 28 Javascript
移动端手指放大缩小插件与js源码
May 22 Javascript
Angular2使用jQuery的方法教程
May 28 jQuery
前端Vue项目详解--初始化及导航栏
Jun 24 Javascript
Javascript实现秒表计时游戏
May 27 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 Javascript
7个你应该知道的JS原生错误类型
Apr 29 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 文件缓存的性能测试
2010/04/25 PHP
PHP中根据IP地址判断城市实现城市切换或跳转代码
2012/09/04 PHP
PHP常见的序列化与反序列化操作实例分析
2019/10/28 PHP
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
jQuery的deferred对象使用详解
2011/08/20 Javascript
jQuery函数的等价原生函数代码示例
2013/05/27 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
javascript控制层显示或隐藏的方法
2015/07/22 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
Javascript继承机制详解
2017/05/30 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
2018/03/02 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
jQuery.parseJSON()函数详解
2019/02/28 jQuery
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
使用preload预加载页面资源时注意事项
2020/02/03 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
python Pillow图像处理方法汇总
2019/10/16 Python
详解Python中namedtuple的使用
2020/04/27 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
Converse匡威法国官网:美国著名帆布鞋品牌
2018/12/05 全球购物
荷兰音乐会和音乐剧门票订购网站:Topticketshop
2019/08/27 全球购物
党员评议思想汇报
2014/10/08 职场文书
银行授权委托书样本
2014/10/13 职场文书
手术室护士个人总结
2015/02/13 职场文书
2015小学教育教学工作总结
2015/07/21 职场文书
单位提档介绍信
2015/10/22 职场文书
浅谈Python基础之列表那些事儿
2021/05/11 Python