js过滤HTML标签以及空格的思路及代码


Posted in Javascript onMay 24, 2013
function setContent(str) {
str = str.replace(/<\/?[^>]*>/g,''); //去除HTML tag
str.value = str.replace(/[ | ]*\n/g,'\n'); //去除行尾空白
//str = str.replace(/\n[\s| | ]*\r/g,'\n'); //去除多余空行
return str;
}

测试的时候发现这段代码不能过滤掉网页中空格字符(即: )。于是自己又改造了一下:

function removeHTMLTag(str) {
            str = str.replace(/<\/?[^>]*>/g,''); //去除HTML tag
            str = str.replace(/[ | ]*\n/g,'\n'); //去除行尾空白
            //str = str.replace(/\n[\s| | ]*\r/g,'\n'); //去除多余空行
            str=str.replace(/ /ig,'');//去掉 
            return str;
    }

恩,我的要求达到了。

现在来稍稍解释一下所用到的三个正则表达吧(需要说明的是,因为自己也是刚刚接触,也许我的解释并不是正确的,仅供参考):

第一个:/<\/?[^>]*>/g

在js中正则表达式是以“/”开头的,后面的/g,含义是表示全局模式,意思是在将匹配的模式应用于整个字符串,而不是在第一次匹配上之后就停止匹配了。

<\/?[^>]*> 这个分开来解释,其中第二个字符“\”是一个转移字符,用来转移后面的”/”字符的。?匹配0或1个正好在它之前的那个字符。注意:这个元字符不是所有的软件都支持的。所以<\/?就是匹配html标签中的”</”格式或者“<”格式的。

再来说[^>]*>。[]是含义是:

js过滤HTML标签以及空格的思路及代码

 ^的含义是:匹配一行的开始。例如正则表达式^When in能够匹配字符串"When in the course of human events"的开始,但是不能匹配"What and When in the"。意思就是匹配以“When in”开头的文字。

*的含义是:匹配0或多个正好在它之前的那个字符。例如正则表达式。*意味着能够匹配任意数量的任何字符

因此[^>]*意思是匹配>之外的字符。所以[^>]可以匹配出的模式可以像下面这样的:

div
我需要的文字</div

我需要的文字</p

*和前面的[^>]结合在一起就可以匹配下面这些字符了:

div>我需要的文字</div
p>我需要的文字</p
br /
再加上后面的>就可以匹配下面的字符了:

div>我需要的文字</div>
p>我需要的文字</p>
br />
这样就完成了一对HTML标签的匹配了。(多句话,总觉得这个匹配有点??拢??遣恢?赖降自谀母龅胤???

第二个:/[ | ]*\n/g:我也没有看懂

第三个:/ /ig:就是直接查找 字符,后面的/ig的含义是在全局模式下进行不区分大小写的查找。g代表全局,i表示不区分大小写。

Javascript 相关文章推荐
用javascript实现的支持lrc歌词的播放器
May 17 Javascript
js函数使用技巧之 setTimeout(function(){},0)
Feb 09 Javascript
js 颜色选择器(兼容firefox)
Mar 05 Javascript
javascript的回调函数应用示例
Feb 20 Javascript
自己用jQuery写了一个图片的马赛克消失效果
May 04 Javascript
使用JavaScript 实现的人脸检测
Mar 24 Javascript
jquery显示隐藏元素的实现代码
May 19 Javascript
在JavaScript中模拟类(class)及类的继承关系
May 20 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
Jul 18 Javascript
AngularJS 所有版本下载地址
Sep 14 Javascript
Node.js应用设置安全的沙箱环境
Apr 23 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
Aug 24 Javascript
jQuery实现表头固定效果的实例代码
May 24 #Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
May 23 #Javascript
使用js+jquery实现无限极联动
May 23 #Javascript
dwz 如何去掉ajaxloading具体代码
May 22 #Javascript
自动最大化窗口的Javascript代码
May 22 #Javascript
JS中的prototype与面向对象的实例讲解
May 22 #Javascript
JS定时关闭窗口的实例
May 22 #Javascript
You might like
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
php获取目标函数执行时间示例
2014/03/04 PHP
php实现文件下载功能的几个代码分享
2014/05/10 PHP
PHP 网站修改默认访问文件的nginx配置
2017/05/27 PHP
Javascript hasOwnProperty 方法 &amp; in 关键字
2008/11/26 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
jquery 页面全选框实践代码
2010/04/02 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
js统计页面的来访次数实现代码
2014/05/09 Javascript
Jquery操作js数组及对象示例代码
2014/05/11 Javascript
详谈javascript异步编程
2016/02/21 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
2016/04/01 Javascript
纯JS代码实现气泡效果
2016/05/04 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
2017/03/30 Javascript
详解vue-cli中配置sass
2017/06/21 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
bootstrap table实现iview固定列的效果实例代码详解
2019/09/30 Javascript
简单谈谈Python中的几种常见的数据类型
2017/02/10 Python
Python单例模式实例详解
2017/03/01 Python
Python中序列的修改、散列与切片详解
2017/08/27 Python
PyTorch上搭建简单神经网络实现回归和分类的示例
2018/04/28 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
Python解决走迷宫问题算法示例
2018/07/27 Python
Python设计模式之适配器模式原理与用法详解
2019/01/15 Python
详解python播放音频的三种方法
2019/09/23 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
深入分析python 排序
2020/08/24 Python
如何用python开发Zeroc Ice应用
2021/01/29 Python
css3制作动态进度条以及附加jQuery百分比数字显示
2012/12/13 HTML / CSS
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
借款协议书范本
2014/04/22 职场文书
出纳工作检讨书范文
2014/12/27 职场文书
慰问信范文
2015/02/14 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
党小组推荐意见
2015/06/02 职场文书