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 相关文章推荐
jQuery实现炫酷的鼠标轨迹特效
Feb 01 Javascript
简单介绍JavaScript中字符串创建的基本方法
Jul 07 Javascript
js中跨域方法原理详解
Jul 19 Javascript
javascript给span标签赋值的方法
Nov 26 Javascript
关于JavaScript作用域你想知道的一切
Feb 04 Javascript
javascript如何定义对象数组
Jun 07 Javascript
Highcharts入门之简介
Aug 02 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
Dec 07 Javascript
layer弹出层全屏及关闭方法
Aug 17 Javascript
详解webpack模块加载器兼打包工具
Sep 11 Javascript
详解mpvue中小程序自定义导航组件开发指南
Feb 11 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
Dec 10 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
一个用php3编写的简单计数器
2006/10/09 PHP
PHP 观察者模式的实现代码
2013/05/10 PHP
PHP批量采集下载美女图片的实现代码
2013/06/03 PHP
php中ob_get_length缓冲与获取缓冲长度实例
2014/11/20 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
关于Mozilla浏览器不支持innerText的解决办法
2011/01/01 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
javaScript对文字按照拼音排序实现代码
2013/12/27 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
JavaScript函数柯里化详解
2016/04/29 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
详解react使用react-bootstrap当轮子造车
2017/08/15 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
2019/10/15 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
django认证系统实现自定义权限管理的方法
2018/07/16 Python
Python 将Matrix、Dict保存到文件的方法
2018/10/30 Python
python地震数据可视化详解
2019/06/18 Python
python 画条形图(柱状图)实例
2020/04/24 Python
Django xadmin安装及使用详解
2020/10/26 Python
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
应届中专生自荐书范文
2014/02/13 职场文书
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
导师评语大全
2014/04/26 职场文书
乐观自信演讲稿范文
2014/05/21 职场文书
银行进社区活动总结
2014/07/07 职场文书
党员个人公开承诺书
2014/08/29 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
教师个人师德工作总结2015
2015/05/12 职场文书
高中家长意见怎么写
2015/06/03 职场文书
《司马光》教学反思
2016/02/22 职场文书
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL