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 相关文章推荐
js宝典学习笔记(上)
Jan 10 Javascript
JavaScript 异步调用框架 (Part 2 - 用例设计)
Aug 03 Javascript
jquery autocomplete自动完成插件的的使用方法
Aug 07 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
Nov 22 Javascript
JavaScript作用域与作用域链深入解析
Dec 06 Javascript
js动态创建标签示例代码
Jun 09 Javascript
jquery JSON的解析方式示例介绍
Jul 27 Javascript
jQuery中change事件用法实例
Dec 26 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
Jan 26 Javascript
VsCode插件整理(小结)
Sep 14 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
Feb 17 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
1.PHP简介
2006/10/09 PHP
Linux系统下PHP-FPM的安装和配置教程
2015/08/17 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
js数组转json并在后台对其解析具体实现
2013/11/20 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
jQuery验证插件validate使用方法详解
2020/09/13 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
AnglarJs中的上拉加载实现代码
2018/02/08 Javascript
node.js遍历目录的方法示例
2018/08/01 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
jQuery控制input只能输入数字和两位小数的方法
2019/05/16 jQuery
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
layui使用label标签的方法
2019/09/14 Javascript
js实现列表向上无限滚动
2020/01/13 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
详解vue路由
2020/08/05 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
详解Vue2的diff算法
2021/01/06 Vue.js
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
python实现封装得到virustotal扫描结果
2014/10/05 Python
Python装饰器模式定义与用法分析
2018/08/06 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
如何把python项目部署到linux服务器
2020/08/26 Python
机械电子工程专业求职信
2014/06/22 职场文书
2014年小学国庆节活动方案
2014/09/16 职场文书
个人合伙协议书范本
2014/10/14 职场文书
平安家庭事迹材料
2014/12/20 职场文书
2016年校长新年寄语
2015/08/17 职场文书
2016年秋季运动会加油稿
2015/12/21 职场文书
vue实现移动端div拖动效果
2022/03/03 Vue.js
spring注解 @PropertySource配置数据源全流程
2022/03/25 Java/Android
USB TYPE-C 或将成为所有智能手机充电标准
2022/04/21 数码科技