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 模拟类机制及私有变量的方法及思路
Jul 10 Javascript
jquery弹出框的用法示例(2)
Aug 26 Javascript
通过length属性判断jquery对象是否存在
Oct 18 Javascript
window.open打开页面居中显示的示例代码
Dec 27 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
Dec 13 Javascript
JS实现窗口加载时模拟鼠标移动的方法
Jun 03 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
Jun 19 Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
May 09 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
Vue的路由及路由钩子函数的实现
Jul 02 Javascript
vue组件添加事件@click.native操作
Oct 30 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 删除文件与文件夹操作 unlink()与rmdir()这两个函数的使用
2011/07/17 PHP
两种php实现图片上传的方法
2016/01/22 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
图片按比例缩放函数
2006/06/26 Javascript
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
基于NodeJS的前后端分离的思考与实践(五)多终端适配
2014/09/26 NodeJs
javascript中undefined与null的区别
2015/08/16 Javascript
js实现的二级横向菜单条实例
2015/08/22 Javascript
javascript自动切换焦点控制效果完整实例
2016/02/02 Javascript
全面详细的jQuery常见开发技巧手册
2016/02/21 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
浅谈Node.js:fs文件系统模块
2016/12/08 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
9种改善AngularJS性能的方法
2017/11/28 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
JS如何生成随机验证码
2020/03/02 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
python实现调用其他python脚本的方法
2014/10/05 Python
利用python批量检查网站的可用性
2016/09/09 Python
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
Python: tkinter窗口屏幕居中,设置窗口最大,最小尺寸实例
2020/03/04 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
2020/03/05 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
详解Pycharm与anaconda安装配置指南
2020/08/25 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
6种非常炫酷的CSS3按钮边框动画特效
2016/03/16 HTML / CSS
爱尔兰领先的在线体育用品零售商:theGAAstore
2018/04/16 全球购物
国贸专业的职业规划书
2014/03/15 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书
学校清洁工岗位职责
2015/04/15 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书