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 相关文章推荐
JS中setTimeout()的用法详解
Apr 14 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
May 08 Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 Javascript
Bootstrap框架安装使用详解
Jan 21 Javascript
javascript事件的传播基础实例讲解(35)
Feb 14 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
Mar 21 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
Jul 18 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
Dec 29 Javascript
解决layui动态添加的元素click等事件触发不了的问题
Sep 20 Javascript
解决$store.getters调用不执行的问题
Nov 08 Javascript
JS实现网站吸顶条
Jan 08 Javascript
Vue组件化开发之通用型弹出框的实现
Feb 28 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单态模式简单用法示例
2016/11/16 PHP
javascript编程起步(第七课)
2007/02/27 Javascript
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
JavaScript中的闭包原理分析
2010/03/08 Javascript
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
JQuery实现列表中复选框全选反选功能封装(推荐)
2016/11/24 Javascript
在一个页面重复使用一个js函数的方法详解
2016/12/26 Javascript
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
2017/06/28 jQuery
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
小程序组件之自定义顶部导航实例
2019/06/12 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
javascript实现点击小图显示大图
2020/11/29 Javascript
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
Python selenium文件上传方法汇总
2020/11/19 Python
Python编程之字符串模板(Template)用法实例分析
2017/07/22 Python
tensorflow实现softma识别MNIST
2018/03/12 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
python实现简易淘宝购物
2019/11/22 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
详解Canvas事件绑定
2018/06/27 HTML / CSS
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
Stubhub英国:购买体育、演唱会和剧院门票
2018/06/10 全球购物
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
竞选演讲稿范文大全
2014/05/12 职场文书
应聘教师求职信
2014/07/19 职场文书
安全生产先进个人事迹材料
2014/12/30 职场文书
指导老师鉴定意见
2015/06/05 职场文书
2016年秋季开学典礼新闻稿
2015/11/25 职场文书
《惊弓之鸟》教学反思
2016/02/20 职场文书
Flask使用SQLAlchemy实现持久化数据
2021/07/16 Python
使用Python解决图表与画布的间距问题
2022/04/11 Python