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 实现AJAX加载XML并解析的脚本
Jul 25 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
Feb 03 Javascript
JavaScript实现简单图片翻转的方法
Apr 17 Javascript
JS JSOP跨域请求实例详解
Jul 04 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
Jul 04 Javascript
关于预加载InstantClick的问题解决方法
Sep 12 Javascript
React Native使用Modal自定义分享界面的示例代码
Oct 31 Javascript
Angular4学习之Angular CLI的安装与使用教程
Jan 04 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
Vue源码分析之Vue实例初始化详解
Aug 25 Javascript
Node.js实现批量下载图片简单操作示例
Jan 18 Javascript
React + Threejs + Swiper 实现全景图效果的完整代码
Jun 28 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/05 PHP
php调用Google translate_tts api实现代码
2013/08/07 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
php中通过DirectoryIterator删除整个目录的方法
2015/03/13 PHP
关于PHP开发的9条建议
2015/07/27 PHP
yii2安装详细流程
2018/05/23 PHP
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
JQuery复制DOM节点的方法
2015/06/11 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
2016/06/21 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
angular使用post、get向后台传参的问题实例
2017/05/27 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
vue-quill-editor富文本编辑器简单使用方法
2018/09/21 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
vue实例的选项总结
2020/06/09 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
[15:09]DOTA2国际邀请赛采访专栏:Loda
2013/08/06 DOTA
python中常用的各种数据库操作模块和连接实例
2014/05/29 Python
python数字图像处理之高级滤波代码详解
2017/11/23 Python
python+matplotlib绘制简单的海豚(顶点和节点的操作)
2018/01/02 Python
Python实现的购物车功能示例
2018/02/11 Python
15个Pythonic的代码示例(值得收藏)
2020/10/29 Python
HTML5之消息通知的使用(Web Notification)
2018/10/30 HTML / CSS
音乐专业自荐信
2014/02/07 职场文书
食品安全处置方案
2014/06/14 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
优秀团支部申报材料
2014/12/26 职场文书
同学聚会通知书
2015/04/20 职场文书
2015夏季作息时间调整通知
2015/04/24 职场文书
劳动争议仲裁代理词
2015/05/25 职场文书
《弟子规》读后感:知廉耻、明是非、懂荣辱、辨善恶
2019/12/03 职场文书
如何使用PostgreSQL进行中文全文检索
2021/05/27 PostgreSQL