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 相关文章推荐
List Installed Hot Fixes
Jun 12 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
Sep 25 Javascript
php,js,css字符串截取的办法集锦
Sep 26 Javascript
js实现iframe跨页面调用函数的方法
Dec 13 Javascript
使用javascript提交form表单方法汇总
Jun 25 Javascript
jQuery 跨域访问解决原理案例详解
Jul 09 Javascript
HTML页面定时跳转方法解析(2种任选)
Dec 22 Javascript
React Native 环境搭建的教程
Aug 19 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
Jul 22 Javascript
vue 项目 iOS WKWebView 加载
Apr 17 Javascript
关于vue-router-link选择样式设置
Apr 30 Vue.js
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
apache rewrite_module模块使用教程
2008/01/10 PHP
php正则过滤html标签、空格、换行符的代码(附说明)
2010/10/25 PHP
深入理解PHP之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
PHP实现链式操作的原理详解
2016/09/16 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
laravel 关联关系遍历数组的例子
2019/10/10 PHP
node.js中的fs.utimes方法使用说明
2014/12/15 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
2016/07/01 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
简单理解Vue条件渲染
2016/12/03 Javascript
vue.js 实现点击按钮动态添加li的方法
2018/09/07 Javascript
详解Ant Design of React的安装和使用方法
2018/12/27 Javascript
element form 校验数组每一项实例代码
2019/10/10 Javascript
windows实现npm和cnpm安装步骤
2019/10/24 Javascript
浅谈解除装饰器作用(python3新增)
2018/10/15 Python
python打开文件的方式有哪些
2020/06/29 Python
html如何对span设置宽度
2019/10/30 HTML / CSS
世界著名的顶级牛排:Omaha Steak(奥马哈牛排)
2016/09/20 全球购物
MVMT手表官方网站:时尚又实惠的高品质手表
2016/12/04 全球购物
预订从美国飞往印度的机票:MyTicketsToIndia
2017/05/19 全球购物
南京迈特望C/C++面试题
2012/07/09 面试题
运动会演讲稿300字
2014/08/25 职场文书
升学宴演讲稿
2014/09/01 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
教育合作协议范本
2014/10/17 职场文书
2014年物业管理工作总结
2014/11/21 职场文书
大学学生个人总结
2015/02/15 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
文明礼仪倡议书
2015/04/28 职场文书
2015年七夕情人节活动方案
2015/05/06 职场文书
工作简报格式范文
2015/07/21 职场文书
python中print格式化输出的问题
2021/04/16 Python
Mysql排查分析慢sql之explain实战案例
2022/04/19 MySQL
postgresql中如何执行sql文件
2023/05/08 PostgreSQL