js过滤HTML标签以及空格的思路及代码

代码如下:

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标签中的”</”格式或者“<”格式的。

再来说[^>]*>。[]是含义是：

^的含义是：匹配一行的开始。例如正则表达式^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表示不区分大小写。

赞 (0)

相关推荐

  • js自动闭合html标签(自动补全html标记)

    复制代码 代码如下: <script type="text/javascript"> // Close HTML Tags -------------------------------------------- function closeHTML(str){ var arrTags=["span","font","b","u","i","h1",&qu

  • 用JS实现HTML标签替换效果

    用JS实现HTML标签替换效果

    有个静态页面 <span id=ab>abcde</span><span id=ab>abcde</span><span id=ab>abcde</span><span id=ab>abcde</span> 能否通过js实现,IE浏览时的代码被替换为 <img src="img/1.gif"/><img src="img/1.gif"/><i

  • js简单实现HTML标签Select联动带跳转

    复制代码 代码如下: <script src="Scripts/jquery-1.9.1.min.js" type="text/javascript"></script> 复制代码 代码如下: <FORM name="form5" id="form5" action="" method="post" target="_blank" ons

  • JS对HTML标签select的获取、添加、删除操作

    复制代码 代码如下: <SELECT NAME="aaa" SIZE="" style="width:200px" > <OPTION VALUE="">(空)</OPTION> <OPTION VALUE="1">1</OPTION> </SELECT> 复制代码 代码如下: //获得html控件 var select = docum

  • javascript实现去除HTML标签的方法

    本文实例讲述了javascript实现去除HTML标签的方法.分享给大家供大家参考,具体如下: <script type="text/javascript"> String.prototype.stripHTML = function() { var reTag = /<(?:.|\s)*?>/g; return this.replace(reTag,""); } var sTest = "<b>this would b

  • JS检测页面中哪个HTML标签触发点击事件的方法

    本文实例讲述了JS检测页面中哪个HTML标签触发点击事件的方法.分享给大家供大家参考,具体如下: 在html标签中,为了页面显示的美观,会在标签中相互嵌套,在做"效果"的时候就难免不了的添加各种事件,例如: <a href=""><span onclick="">dddd</span></a> 当用户点击的时候,想确定是链接产生的事件还是span标签onclick标签产生的事件,这个有时候是很有必要

  • Java/Js下使用正则表达式匹配嵌套Html标签

    Java/Js下使用正则表达式匹配嵌套Html标签

    通用 HTML 标签区配正则 最近看网站日志,发现有人在博客上转了我不知道几年前写的一个匹配 HTML 标签的正则,刚好最近也在做一些相关的事情,顿时来了兴趣.就拿回来改改,成了下面这样,可能会有一些 case 遗漏,欢迎修改,已知在内嵌 <script> 复杂内容的处理能力较弱,不过对纯 HTML 来说已经够用,拿来做一些分析工具还是不错滴. 复制代码 代码如下: <script type="text/javascript"> var str = "

  • JavaScript检测字符串中是否含有html标签实现方法

    功能代码 复制代码 代码如下: /**  * 字符串是否含有html标签的检测  * @param htmlStr  */ function checkHtml(htmlStr) {     var  reg = /<[^>]+>/g;     return reg.test(htmlStr); } demo script: 复制代码 代码如下: /**  * 字符串是否含有html标签的检测  * @param htmlStr  */ function checkHtml(htmlSt

  • javascript通过获取html标签属性class实现多选项卡的方法

    本文实例讲述了javascript通过获取html标签属性class实现多选项卡的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>原生javascript通过获取html标签属性class实现多选项卡</title> <style type="text/css">

  • JavaScript 替换Html标签实现代码

    复制代码 代码如下: str = str.<br /> replace( /&(?!#?\w+;)/g , '&').<br /> replace( /undefinedundefined([^undefinedundefined]*)"/g , '"$1"' ).<br /> replace( /</g , '<' ).<br /> replace( />/g , '>' ).<b

  • js过滤HTML标签完整实例

    本文实例讲述了js过滤HTML标签的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&

随机推荐