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打印网页部分内容的脚本
Nov 17 Javascript
JavaScript CSS修改学习第一章 查找位置
Feb 19 Javascript
jQuery $.each的用法说明
Mar 22 Javascript
改写一个简单的菜单 弹性大小
Dec 02 Javascript
再论Javascript的类继承
Mar 05 Javascript
学习javascript,实现插入排序实现代码
Jul 31 Javascript
减少访问DOM的次数提升javascript性能
Feb 24 Javascript
JavaScript判断变量是对象还是数组的方法
Aug 28 Javascript
javascript初学者常用技巧
Sep 02 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 Javascript
javascript控制台详解
Jun 25 Javascript
es6数值的扩展方法
Mar 11 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缓存技术介绍
2006/11/25 PHP
详解PHP防止直接访问.php 文件的实现方法
2017/07/28 PHP
php-app开发接口加密详解
2018/04/18 PHP
关于使用 jBox 对话框的提交不能弹出问题解决方法
2012/11/07 Javascript
javascript操作html控件实例(javascript添加html)
2013/12/02 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
JavaScript正则表达式匹配 div  style标签
2016/03/15 Javascript
基于javascript实现九宫格大转盘效果
2020/05/28 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
jQuery学习笔记之入门
2016/12/14 Javascript
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
jQuery+ajax读取json数据并按照价格排序示例
2018/03/28 jQuery
详解node Async/Await 更好的异步编程解决方案
2018/05/10 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
2种在vue项目中使用百度地图的简单方法
2018/09/28 Javascript
es6数据变更同步到视图层的方法
2019/03/04 Javascript
Vue通过WebSocket建立长连接的实现代码
2019/11/05 Javascript
vue父子组件的通信方法(实例详解)
2019/11/10 Javascript
Threejs实现滴滴官网首页地球动画功能
2020/07/13 Javascript
Python生成随机数组的方法小结
2017/04/15 Python
django创建超级用户过程解析
2019/09/18 Python
python如何从文件读取数据及解析
2019/09/19 Python
python实现用类读取文件数据并计算矩形面积
2020/01/18 Python
Python使用plt.boxplot() 参数绘制箱线图
2020/06/04 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
英国航空官网:British Airways
2016/09/11 全球购物
乌克兰排名第一的在线旅游超市:Farvater.Travel
2020/01/02 全球购物
门前三包责任书
2014/04/15 职场文书
三年级班级文化建设方案
2014/05/04 职场文书
环保证明
2015/06/23 职场文书
2015初中团支部工作总结
2015/07/21 职场文书
python ansible自动化运维工具执行流程
2021/06/24 Python