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 相关文章推荐
Ajax::prototype 源码解读
Jan 22 Javascript
解决jQuery插件tipswindown与hintbox冲突
Nov 05 Javascript
Fixie.js 自动填充内容的插件
Jun 28 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
Jun 05 Javascript
JS获取鼠标坐标的实例方法
Jul 18 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Jun 02 Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 Javascript
详解 vue.js用法和特性
Oct 15 Javascript
React路由管理之React Router总结
May 10 Javascript
node前端模板引擎Jade之标签的基本写法
May 11 Javascript
react组件基本用法示例小结
Apr 27 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中通过ADO调用Access数据库的方法测试不通过
2006/12/31 PHP
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
yii2框架中使用下拉菜单的自动搜索yii-widget-select2实例分析
2016/01/09 PHP
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
javascript编程起步(第七课)
2007/02/27 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
2014/02/28 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
JavaScript函数的调用以及参数传递
2015/10/21 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
2015/11/24 Javascript
理解Javascript文件动态加载
2016/01/29 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
JS 获取HTML标签内的子节点的方法
2016/09/21 Javascript
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
利用10行js代码实现上下滚动公告效果
2017/12/08 Javascript
前端Electron新手入门教程详解
2019/06/21 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
python使用PyFetion来发送短信的例子
2014/04/22 Python
Python常用字符串替换函数strip、replace及sub用法示例
2018/05/21 Python
简单了解Python3 bytes和str类型的区别和联系
2019/12/19 Python
Python之Class&amp;Object用法详解
2019/12/25 Python
简单了解python filter、map、reduce的区别
2020/01/14 Python
Python如何使用paramiko模块连接linux
2020/03/18 Python
python利用faker库批量生成测试数据
2020/10/15 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
主题婚礼策划方案
2014/02/10 职场文书
田径运动会通讯稿
2014/09/13 职场文书
大专毕业生自我鉴定范文(2篇)
2014/09/27 职场文书
给老婆的检讨书1000字
2015/01/01 职场文书
2016年大学生暑期社会实践活动总结
2016/04/06 职场文书
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android