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的浮动DIV显示提示信息并自动隐藏
Feb 11 Javascript
单击按钮显示隐藏子菜单经典案例
Jan 04 Javascript
js/jquery解析json和数组格式的方法详解
Jan 09 Javascript
js事件监听机制(事件捕获)总结
Aug 08 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
Node.js中的缓冲与流模块详细介绍
Feb 11 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
Aug 03 Javascript
深入php面向对象、模式与实践
Feb 16 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
May 13 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
Jun 26 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
从零开始封装自己的自定义Vue组件
Oct 09 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 form 表单传参明细研究
2009/07/17 PHP
php面向对象全攻略 (四)构造方法与析构方法
2009/09/30 PHP
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
PHP将回调函数作用到给定数组单元的方法
2014/08/19 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
javascript事件冒泡实例分析
2015/05/13 Javascript
JS获取下拉框显示值和判断单选按钮的方法
2015/07/09 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
微信小程序访问node.js接口服务器搭建教程
2017/04/25 Javascript
11行JS代码制作二维码生成功能
2018/03/09 Javascript
NodeJS开发人员常见五个错误理解
2020/10/14 NodeJs
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
python字符串对其居中显示的方法
2015/07/11 Python
浅析Python中MySQLdb的事务处理功能
2016/09/21 Python
python中正则的使用指南
2016/12/04 Python
Python 多线程的实例详解
2017/09/07 Python
python 基本数据类型占用内存空间大小的实例
2018/06/12 Python
对python实现二维函数高次拟合的示例详解
2018/12/29 Python
Python制作动态字符图的实例
2019/01/27 Python
浅谈pyqt5在QMainWindow中布局的问题
2019/06/21 Python
Python实现Mysql数据统计及numpy统计函数
2019/07/15 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
AUC计算方法与Python实现代码
2020/02/28 Python
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
2016/03/21 HTML / CSS
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
简短大学毕业感言
2014/01/18 职场文书
最新会计专业求职信范文
2014/01/28 职场文书
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
舞蹈专业求职信
2014/06/13 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
安全生产月标语
2014/10/07 职场文书
浅析Django接口版本控制
2021/06/26 Python
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers
MySQL数据库简介与基本操作
2022/05/30 MySQL