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滑动门代码
Dec 19 Javascript
12个非常有创意的JavaScript小游戏
Mar 18 Javascript
jquery插件制作简单示例说明
Feb 03 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
Nov 12 Javascript
JS采用绝对定位实现回到顶部效果完整实例
Jun 20 Javascript
Angularjs---项目搭建图文教程
Jul 08 Javascript
详解Web使用webpack构建前端项目
Sep 23 Javascript
AngularJS 表单验证手机号的实例(非必填)
Nov 12 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
Feb 26 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
May 15 Javascript
js 实现碰撞检测的示例
Oct 28 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学习笔记 用户注册模块用户类以及验证码类
2011/09/20 PHP
基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)
2014/01/31 PHP
PHP 序列化和反序列化函数实例详解
2020/07/18 PHP
php调用云片网接口发送短信的实现方法
2017/10/25 PHP
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
微信小程序 教程之WXML
2016/10/18 Javascript
jquery实现简单的瀑布流布局
2016/12/11 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
js实现仿购物车加减效果
2017/03/01 Javascript
微信小程序 参数传递实例代码
2017/03/20 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
Python使用py2exe打包程序介绍
2014/11/20 Python
python登陆asp网站页面的实现代码
2015/01/14 Python
Python正则表达式知识汇总
2017/09/22 Python
使用Python来开发微信功能
2018/06/13 Python
Python 中pandas索引切片读取数据缺失数据处理问题
2019/10/09 Python
Python Django框架模板渲染功能示例
2019/11/08 Python
pytorch使用 to 进行类型转换方式
2020/01/08 Python
什么是Python变量作用域
2020/06/03 Python
C#中类(class)与结构(struct)的异同
2013/11/03 面试题
一封普通求职者的求职信
2013/11/20 职场文书
高级编程求职信模板
2014/02/16 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
大学生学期个人总结
2015/02/12 职场文书
个人党性锻炼总结
2015/03/05 职场文书
社区义诊通知
2015/04/24 职场文书
靠谱的活动总结
2019/04/16 职场文书
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python
世界十大狙击步枪排行榜
2022/03/20 杂记
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL