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数组插入一条记录的代码
Aug 30 Javascript
地震发生中逃生十大法则
May 12 Javascript
图片在浏览器中底部对齐 解决方法之一
Nov 30 Javascript
js 表单提交后按钮变灰的实例代码
Aug 16 Javascript
文本域光标操作的jQuery扩展分享
Mar 10 Javascript
javascript中使用正则计算中文长度的例子
Apr 29 Javascript
js中各种类型的变量在if条件中是true还是false
Jul 16 Javascript
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
Sep 05 Javascript
React Native之prop-types进行属性确认详解
Dec 19 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
前端canvas中物体边框和控制点的实现示例
Aug 05 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 分页类(模仿google)-面试题目解答
2009/09/13 PHP
php面向对象全攻略 (十七) 自动加载类
2009/09/30 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
PHP加MySQL消息队列深入理解
2021/02/27 PHP
JS 继承实例分析
2008/11/04 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
jquery带动画效果幻灯片特效代码
2015/08/27 Javascript
javascript实现动态标签云
2015/10/16 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
2016/03/11 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
2017/02/17 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
微信小程序 本地数据读取实例
2017/04/27 Javascript
浅谈Vue网络请求之interceptors实际应用
2018/02/28 Javascript
JS原型与继承操作示例
2019/05/09 Javascript
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
python开发之thread线程基础实例入门
2015/11/11 Python
Python做文本按行去重的实现方法
2016/10/19 Python
Python绑定方法与非绑定方法详解
2017/08/18 Python
python单向链表的基本实现与使用方法【定义、遍历、添加、删除、查找等】
2019/10/24 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
Python常驻任务实现接收外界参数代码解析
2020/07/21 Python
深入CSS3 动画效果的总结详解
2013/05/09 HTML / CSS
HTML5中form如何关闭自动完成功能的方法
2018/07/02 HTML / CSS
网络研修随笔感言
2014/02/17 职场文书
《分一分》教学反思
2014/04/13 职场文书
户外活动总结范文
2014/04/30 职场文书
争先创优演讲稿
2014/09/15 职场文书
开展党的群众路线教育实践活动情况汇报
2014/11/05 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
考勤制度通知
2015/04/25 职场文书