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入门教程(9) Document文档对象
Jan 31 Javascript
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 Javascript
setTimeout与setInterval在不同浏览器下的差异
Jan 24 Javascript
jQuery选中select控件 无法设置selected的解决方法
Sep 01 Javascript
新浪微博字数统计 textarea字数统计实现代码
Aug 28 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
Dec 12 Javascript
AnjularJS中$scope和$rootScope的区别小结
Sep 18 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
微信小程序 scroll-view实现锚点滑动的示例
Dec 06 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 Javascript
详解Vue源码学习之双向绑定
Apr 10 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
Oct 15 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 页面跳转到另一个页面的多种方法方法总结
2009/07/07 PHP
洪恩在线成语词典小偷程序php版
2012/04/20 PHP
Yii框架连接mongodb数据库的代码
2016/07/27 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
javascript 异常处理使用总结
2009/06/21 Javascript
在jQuery ajax中按钮button和submit的区别分析
2012/10/07 Javascript
构造函数+原型模式构造js自定义对象(最通用)
2014/05/12 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
2014/05/28 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
JS实现生成会变大变小的圆环实例
2015/08/05 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
2020/11/25 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
深入理解vue中的$set
2017/06/01 Javascript
Angularjs验证用户输入的字符串是否为日期时间
2017/06/01 Javascript
BootStrap 动态表单效果
2017/06/02 Javascript
vue cli 3.0 搭建项目的图文教程
2019/05/17 Javascript
解决layui table表单提示数据接口请求异常的问题
2019/09/24 Javascript
Python中运行并行任务技巧
2015/02/26 Python
Python 字符串大小写转换的简单实例
2017/01/21 Python
利用python打印出菱形、三角形以及矩形的方法实例
2017/08/08 Python
tensorflow构建BP神经网络的方法
2018/03/12 Python
python版本单链表实现代码
2018/09/28 Python
通过pycharm使用git的步骤(图文详解)
2019/06/13 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
2015/04/24 HTML / CSS
教师找工作推荐信
2013/11/23 职场文书
运动会广播稿20字
2014/02/18 职场文书
大学生心理活动总结
2014/07/04 职场文书
新闻稿标题
2015/07/18 职场文书
PYTHON InceptionV3模型的复现详解
2022/05/06 Python