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 相关文章推荐
jQuery 常见开发使用技巧总结
Dec 26 Javascript
JQuery AJAX提交中文乱码的解决方案
Jul 02 Javascript
深入document.write()与HTML4.01的非成对标签的详解
May 08 Javascript
jQuery实现的一个自定义Placeholder属性插件
Aug 11 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
Aug 17 Javascript
多种JQuery循环滚动文字图片效果代码
Jun 23 Javascript
AngularJs入门教程之环境搭建+创建应用示例
Nov 01 Javascript
js实现倒计时效果(小于10补零)
Mar 08 Javascript
javascript数据结构中栈的应用之符号平衡问题
Apr 11 Javascript
JavaScript实现的浏览器下载文件的方法
Aug 09 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
Mar 01 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
Sep 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
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
php中addslashes函数与sql防注入
2014/11/17 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
YII动态模型(动态表名)支持分析
2016/03/29 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
代码生成器 document.write()
2007/04/15 Javascript
28个JS验证函数收集
2010/03/02 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
2014/05/04 Javascript
jQuery中多个元素的Hover事件解决方案
2014/06/12 Javascript
js 左右悬浮对联广告代码示例
2014/12/12 Javascript
js实现网页收藏功能
2015/12/17 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
jQuery基于正则表达式的表单验证功能示例
2017/01/21 Javascript
js禁止浏览器页面后退功能的实例(推荐)
2017/09/01 Javascript
jQuery封装animate.css的实例
2018/01/04 jQuery
es6基础学习之解构赋值
2018/12/10 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
python进阶教程之模块(module)介绍
2014/08/30 Python
python生成词云的实现方法(推荐)
2017/06/13 Python
Python内置函数reversed()用法分析
2018/03/20 Python
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
网络、C以及其他硬件方面的面试题
2016/08/23 面试题
研究生自我鉴定范文
2013/10/30 职场文书
员工年终演讲稿
2014/01/03 职场文书
商超业务员岗位职责
2014/03/12 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
三严三实对照检查材料范文
2014/09/23 职场文书
毕业生学校组织意见
2015/06/04 职场文书
公司车队管理制度
2015/08/04 职场文书
vue2实现provide inject传递响应式
2021/05/21 Vue.js
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript