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 isArray()函数判断对象类型的种种方法
Oct 11 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Sep 26 Javascript
JavaScript运算符小结
Jun 03 Javascript
禁止按回车键提交表单的方法
Jun 11 Javascript
jQuery实现标题有打字效果的焦点图代码
Nov 16 Javascript
JavaScript编程学习技巧汇总
Feb 21 Javascript
Webpack打包慢问题的完美解决方法
Mar 16 Javascript
微信小程序实现滑动删除效果
May 19 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
实例讲解JavaScript截取字符串
Nov 30 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发送有附件的电子邮件-(PHPMailer使用的实例分析)
2013/04/26 PHP
php数组键名技巧小结
2015/02/17 PHP
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
详解PHP数组赋值方法
2015/11/07 PHP
windows server 2008/2012安装php iis7 mysql环境搭建教程
2016/06/30 PHP
对PHP依赖注入的理解实例分析
2016/10/09 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
JSON扫盲帖 JSON.as类教程
2009/02/16 Javascript
JavaScript 事件属性绑定带参数的函数
2009/03/13 Javascript
避免 showModalDialog 弹出新窗体的原因分析
2010/05/31 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
AngularJS实现DOM元素的显示与隐藏功能
2016/11/22 Javascript
微信小程序 页面跳转传递值几种方法详解
2017/01/12 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
2017/03/09 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
2017/11/28 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
基于vue.js实现的分页
2018/03/13 Javascript
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
vue之延时刷新实例
2019/11/14 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
Python使用Scrapy保存控制台信息到文本解析
2017/12/27 Python
Django框架搭建的简易图书信息网站案例
2019/05/25 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
Tensorflow 1.0之后模型文件、权重数值的读取方式
2020/02/12 Python
Pytorch转keras的有效方法,以FlowNet为例讲解
2020/05/26 Python
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
2013/01/31 HTML / CSS
机电专业毕业生推荐信
2013/11/10 职场文书
十佳青年个人事迹材料
2014/01/28 职场文书
培训通知书模板
2015/04/17 职场文书
警示教育片观后感
2015/06/17 职场文书
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android
使用Bandicam录制鼠标指针并附带点击声音,还可以添加点击动画效果
2022/04/11 数码科技
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js