JavaScript 替换Html标签实现代码

更新时间：2009年10月14日 15:12:22 作者：

这种技术被广泛应用于表单验证，语法高亮和危险字符过滤中。一段话如果很长，如果不想像下面那样替换，我们得想些办法了。

 
str = str.<br /> 
replace( /&amp;(?!#?\w+;)/g , '&amp;').<br /> 
replace( /undefinedundefined([^undefinedundefined]*)&quot;/g , '“$1”' ).<br /> 
replace( /&lt;/g , '&lt;' ).<br /> 
replace( /&gt;/g , '&gt;' ).<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”', 
'<' : '<' , 
'>' : '>', 
'…' : '…', 
'“' : '“' , 
'”' : '”' , 
'‘' : '‘' , 
''' : ''' , 
'—' : '—', 
'–' : '–' 
}); 

您可能感兴趣的文章:

Html
标签

用VsCode编辑TypeScript的实现方法
这篇文章主要介绍了用VsCode编辑TypeScript的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-05-05
JavaScript获取Url里的参数
这篇文章主要介绍了JavaScript获取Url里的参数,需要的朋友可以参考下
2014-12-12
JavaScript的变量作用域深入理解
深入理解JavaScript的变量作用域,需要的朋友可以参考下。
2009-10-10
ES6 Symbol在对象中的作用实例分析
这篇文章主要介绍了ES6 Symbol在对象中的作用,结合实例形式分析了ES6 Symbol在对象中声明、使用方法与相关注意事项,需要的朋友可以参考下
2020-06-06
验证手机号码的JS方法分享
这篇文章介绍了验证手机号码的JS方法，有需要的朋友可以参考一下
2013-09-09
解决页面js接受Long型损失精度问题(最新解决方案)
这篇文章主要介绍了解决页面js接受Long型损失精度问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-03-03
js parentElement和offsetParent之间的区别
这里主要说的是 offsetParent 属性，这个属性在 MSDN 的文档中也没有解释清楚，这就让人更难理解这个属性。这几天在网上找了些资料看看，再加上自己的一些测试，对此属性有了那么一点的了解，在这里总结一下。
2010-03-03
JavaScript实现各种排序的代码详解
这篇文章给大家介绍了js实现各种排序功能，包括冒泡排序，选择排序和插入排序，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下吧
2017-08-08
form+iframe解决跨域上传文件的方法
下面小编就为大家带来一篇form+iframe解决跨域上传文件的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-11-11
微信小程序去除左上角返回键的实现方法
这篇文章主要介绍了微信小程序去除左上角返回键的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-03-03