脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Html 标签

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”',
'<' : '<' ,
'>' : '>',
'…' : '…',
'“' : '“' ,
'”' : '”' ,
'‘' : '‘' ,
''' : ''' ,
'—' : '—',
'–' : '–'
});
您可能感兴趣的文章:

相关文章

  • 35个JS中实用工具函数的代码分享

    35个JS中实用工具函数的代码分享

    身为后台开发的各位铁铁，实际开发不管是公司要求或是自身发展，学前端已经是我们内卷路上必定碰到的，那今天小编就给大家总结下那些我们工作中可能遇到的一些实用Js函数
    2022-06-06
  • 基于Proxy的小程序状态管理实现

    基于Proxy的小程序状态管理实现

    这篇文章主要介绍了基于Proxy的小程序状态管理实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06
  • 让你更好使用Typescript的11个技巧分享

    让你更好使用Typescript的11个技巧分享

    学习Typescript通常是一个重新发现的过程。本文将总结几个技巧，帮助你充分发挥语言的潜力，感兴趣的小伙伴可以跟随小编一起学习一下
    2023-01-01
  • JS中的.length属性和.size()方法的区别

    JS中的.length属性和.size()方法的区别

    length是js原生属性,size()是jQuery方法,如果你只是想获取元素的个数,两者效果一样既.length和.size()获取的值是一样的
    2024-08-08
  • 善用事件代理，警惕闭包的性能陷阱。

    善用事件代理，警惕闭包的性能陷阱。

    关于JS性能优化中的冰山一角：事件代理、警惕闭包。其实本文有一个文章已经说到，闭包如何产生，闭包的作用；
    2011-01-01
  • 使用js验证hash,content hash , chunk hash的区别解析

    使用js验证hash,content hash , chunk hash的区别解

    crypto-js是一个JavaScript加密算法库,用于实现各种加密算法和哈希函数,它提供了一种简单而强大的方式来执行加密操作,包括对称加密算法、非对称加密算法和哈希函数等,本文给大家介绍使用js验证hash,content hash , chunk hash的区别解析,感兴趣的朋友跟随小编一起看看吧
    2024-12-12
  • 基于javascript代码实现通过点击图片显示原图片

    基于javascript代码实现通过点击图片显示原图片

    这篇文章主要介绍了基于javascript代码实现通过点击图片显示原图片的相关资料,需要的朋友可以参考下
    2015-11-11
  • javascript图片预览和上传（兼容IE）

    javascript图片预览和上传（兼容IE）

    这篇文章主要为大家详细介绍了javascript图片预览和上传的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 基于javascript bootstrap实现生日日期联动选择

    基于javascript bootstrap实现生日日期联动选择

    这篇文章主要介绍了基于javascript bootstrap实现生日日期联动选择的相关资料,需要的朋友可以参考下
    2016-04-04
  • 如何使用JS中的webWorker

    如何使用JS中的webWorker

    作为浏览器脚本语言，如果JavaScript不是单线程，那么就有点棘手了。比如，与用户交互或者对DOM进行操作时，在一个线程上修改某个DOM，另外的线程删除DOM，这时浏览器该如何抉择呢?
    2021-05-05

最新评论