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 each函数的链式调用
Jul 22 Javascript
javascript多种数据类型表格排序代码分析
Sep 11 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 Javascript
JS简单实现元素复制示例附图
Nov 19 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
Sep 04 Javascript
理解JavaScript中worker事件api
Dec 25 Javascript
浅谈时钟的生成(js手写简洁代码)
Aug 20 Javascript
JavaScript中cookie工具函数封装的示例代码
Oct 11 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
Nov 20 Javascript
vue中实现methods一个方法调用另外一个方法
Feb 08 Javascript
解决vue页面渲染但dom没渲染的操作
Jul 27 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
Oct 29 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
点评山进PR-D3L三波段收音机
2021/03/02 无线电
phpQuery占用内存过多的处理方法
2013/11/13 PHP
Js 获取当前日期时间及其它操作实现代码
2021/03/04 Javascript
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
js的alert弹出框出现乱码解决方案
2013/09/02 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
2014/03/28 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
jquery中获取元素里某一特定子元素的代码
2014/12/02 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
jquery实现垂直和水平菜单导航栏
2020/08/27 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
2019/02/14 jQuery
新手如何快速理解js异步编程
2019/06/24 Javascript
layui使用数据表格实现购物车功能
2019/07/26 Javascript
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
[04:52]2015国际邀请赛LGD战队晋级之路
2015/08/14 DOTA
python动态加载变量示例分享
2014/02/17 Python
python获取本机外网ip的方法
2015/04/15 Python
用Python的Tornado框架结合memcached页面改善博客性能
2015/04/24 Python
python多进程和多线程究竟谁更快(详解)
2017/05/29 Python
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
Pytorch抽取网络层的Feature Map(Vgg)实例
2019/08/20 Python
Python定义一个Actor任务
2020/07/29 Python
Python中logging日志的四个等级和使用
2020/11/17 Python
解决Firefox下不支持outerHTML问题代码分享
2014/06/04 HTML / CSS
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
毕业生欢送会主持词
2014/03/31 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
大学毕业生自我评价
2015/03/02 职场文书
台风停课通知
2015/04/24 职场文书
2015年工商所工作总结
2015/05/21 职场文书
Java SSM配置文件案例详解
2021/08/30 Java/Android
Redis Lua脚本实现ip限流示例
2022/07/15 Redis