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 相关文章推荐
根据鼠标的位置动态的控制层的位置
Nov 24 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
Jun 05 Javascript
初识Node.js
Mar 20 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
Nov 25 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
详解Weex基于Vue2.0开发模板搭建
Mar 20 Javascript
jQuery操作之效果详解
May 19 jQuery
详解AngularJS脏检查机制及$timeout的妙用
Jun 19 Javascript
spirngmvc js传递复杂json参数到controller的实例
Mar 29 Javascript
微信小程序自定义导航栏实例代码
Apr 05 Javascript
bootstrap-table后端分页功能完整实例
Jun 01 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
php木马攻击防御之道
2008/03/24 PHP
php 中英文语言转换类代码
2011/08/11 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(九)
2014/06/24 PHP
PHP实现的62进制转10进制,10进制转62进制函数示例
2019/06/06 PHP
PHP+iframe模拟Ajax上传文件功能示例
2019/07/02 PHP
javascript IE中的DOM ready应用技巧
2008/07/23 Javascript
JavaScript对象创建及继承原理实例解剖
2013/02/28 Javascript
JS获取html对象的几种方式介绍
2013/12/05 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
原生js实现模拟滚动条
2015/06/15 Javascript
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
JS实现页面打印功能
2017/03/16 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
vue2里面ref的具体使用方法
2017/10/27 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
2020/04/04 jQuery
JavaScript通如何过RGraph实现动态仪表盘
2020/10/15 Javascript
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
python调用自定义函数的实例操作
2019/06/26 Python
Django 后台获取文件列表 InMemoryUploadedFile的例子
2019/08/07 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
在python中实现求输出1-3+5-7+9-......101的和
2020/04/02 Python
Python中无限循环需要什么条件
2020/05/27 Python
python小白学习包管理器pip安装
2020/06/09 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
python时间time模块处理大全
2020/10/25 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
C++面试题目
2013/06/25 面试题
小学生元旦广播稿
2014/02/21 职场文书
成绩单家长评语大全
2014/04/16 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python
使用vue判断当前环境是安卓还是IOS
2022/04/12 Vue.js
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技