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中的var_dump函数实现代码
Sep 07 Javascript
JavaScript面向对象之静态与非静态类
Feb 03 Javascript
select 控制网页内容隐藏于显示的实现代码
May 25 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
Feb 23 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 Javascript
JS/Jquery判断对象为空的方法
Jun 11 Javascript
AngularJS中的过滤器使用详解
Jun 16 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
Dec 08 Javascript
fetch 使用及如何接收JS传值
Nov 11 Javascript
浅谈Vue SPA 首屏加载优化实践
Dec 15 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
Feb 18 Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 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获取mysql版本的几种方法小结
2008/03/25 PHP
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
php下正则来匹配dede模板标签的代码
2010/08/21 PHP
linux系统上支持php的 iconv()函数的方法
2011/10/01 PHP
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
php通过文件流方式复制文件的方法
2015/03/13 PHP
jQuery ajax+PHP实现的级联下拉列表框功能示例
2019/02/12 PHP
JavaScript 学习点滴记录
2009/04/24 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
2013/04/22 Javascript
JS画线(实例代码)
2013/11/20 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
2015/06/19 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
Vue中的$set的使用实例代码
2018/10/08 Javascript
史上最为详细的javascript继承(推荐)
2019/05/18 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
2019/12/27 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
2020/05/13 Javascript
Python中type的构造函数参数含义说明
2015/06/21 Python
Python使用defaultdict读取文件各列的方法
2017/05/11 Python
go和python变量赋值遇到的一个问题
2017/08/31 Python
Python编程实现蚁群算法详解
2017/11/13 Python
Python使用pydub库对mp3与wav格式进行互转的方法
2019/01/10 Python
python之mock模块基本使用方法详解
2019/06/27 Python
python使用minimax算法实现五子棋
2019/07/29 Python
python实现坦克大战
2020/04/24 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
使用python采集Excel表中某一格数据
2020/05/14 Python
Python CSS选择器爬取京东网商品信息过程解析
2020/06/01 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
详解HTML5新增标签
2017/11/27 HTML / CSS
Gap中国官网:美式休闲风服饰
2017/02/05 全球购物
会计专业自我鉴定范文
2013/10/06 职场文书
高中生自我评价个人范文
2013/11/09 职场文书
前台文员我鉴定
2014/01/12 职场文书
基层党建工作宣传标语
2014/06/24 职场文书
2015年出纳个人工作总结
2015/04/02 职场文书