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 元素相对定位代码
Oct 15 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
Jun 10 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
Dec 02 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 Javascript
Bootstrap表单布局
Jul 19 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
Dec 26 Javascript
微信小程序自定义tab实现多层tab嵌套功能
Jun 15 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
vue 路由守卫(导航守卫)及其具体使用
Feb 25 Javascript
js实现省级联动(数据结构优化)
Jul 17 Javascript
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
React自定义hook的方法
Jun 25 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网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
php常用文件操作函数汇总
2014/11/22 PHP
Laravel中使用阿里云OSS Composer包分享
2015/02/10 PHP
php实现比较两个字符串日期大小的方法
2015/05/12 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
PhpStorm连接服务器并实现自动上传功能
2020/12/09 PHP
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
2015/12/02 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
2015/12/14 Javascript
Vue实现百度下拉提示搜索功能
2017/06/21 Javascript
详解JSONObject和JSONArray区别及基本用法
2017/10/25 Javascript
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
浅谈Vue CLI 3结合Lerna进行UI框架设计
2019/04/14 Javascript
vue动态注册组件实例代码详解
2019/05/30 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
Python argparse模块应用实例解析
2019/11/15 Python
Python unittest 自动识别并执行测试用例方式
2020/03/09 Python
css3 box-sizing属性使用参考指南
2013/01/08 HTML / CSS
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
标准导师推荐信(医学类)
2013/10/28 职场文书
医学毕业生自我鉴定
2013/10/30 职场文书
个人现实表现材料
2014/02/04 职场文书
安全生产活动月方案
2014/03/09 职场文书
共产党员公开承诺书
2014/03/25 职场文书
机械专业求职信
2014/05/25 职场文书
工作时间证明
2015/06/15 职场文书
关于开学的感想
2015/08/10 职场文书
2016中秋节晚会开场白
2015/11/26 职场文书
「魔法少女伊莉雅」美游粘土人开订
2022/03/21 日漫
利用Apache Common将java对象池化的问题
2022/06/16 Servers
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers