服务器之家：专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - 正则表达式 - Java/Js下使用正则表达式匹配嵌套Html标签

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

2020-07-31 17:32正则之家 正则表达式

以前写过一篇文章讲解如何使用正则表达式完美解决Html嵌套标签的匹配问题（使用正则表达式匹配嵌套Html标签），但是里头用到了平衡组这样的高级特性，貌似只有DotNet还有Perl正则引擎支持，因此通用性不高。

js正则表达式替换HTML标签以及空格( )

js代码：

  1. function filter(text) { 
  2.   var reg = /<[^<>]+>/g;//1、全局匹配g肯定忘记写,2、<>标签中不能包含标签实现过滤HTML标签 
  3.   text = text.replace(reg, '');//替换HTML标签 
  4.   text = text.replace(/&nbsp;/ig, '');//替换HTML空格 
  5.   return text; 
  6.   }; 
 

在angularJS中使用过滤器过滤富文本数据

  1. app.filter('qxhtml', function () { 
  2.   return function (text) { 
  3.    var reg = /<[^<>]+>/g; 
  4.    text = text.replace(reg, ''); 
  5.    text = text.replace(/&nbsp;/ig, ''); 
  6.    if (text.length > 50) { 
  7.     text = text.substring(0, 50) + "..."; 
  8.    } 
  9.    return text; 
  10.   }; 
  11.  }); 
 

使用过滤器

<div class="desc">
{{y.Description| qxhtml}}
</div>

下面是其他网友的补充

js如何使用正则表达式实现过滤HTML标签？（/<[^<>]+>/g）

一、总结（点击显示或隐藏总结内容）

js进阶正则表达式实现过滤HTML标签（<>标签中不能包含标签实现过滤HTML标签：/<[^<>]+>/g）

var reg=/<[^<>]+>/g

1、全局匹配g肯定不能忘记写
2、<>标签中不能包含标签实现过滤HTML标签

二、js进阶正则表达式实现过滤HTML标签

实例描述：将一段带有HTML标签的文本的HTML标签过滤掉，转化为纯文本输出

三、代码

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.  <meta charset="UTF-8"> 
  5.  <title>过滤HTML标签</title> 
  6.  <style type="text/css"> 
  7.   textarea{ 
  8.    width: 60%; 
  9.    font-size: 18px; 
  10.    background: rgba(100,200,50,0.3); 
  11.   } 
  12.   #text2{ 
  13.    background:rgba(200,100,50,0.3); 
  14.   } 
  15.  </style> 
  16. </head> 
  17. <body> 
  18.  <textarea id="text1" rows="10" cols="50"></textarea><br><br> 
  19.  <input type="button" id="btn1" value="过滤HTML标签"><br><br> 
  20.  <textarea id="text2" rows="10" cols="50"></textarea> 
  21.  <script type="text/javascript"> 
  22.   var btn1=document.getElementById('btn1') 
  23.   var text1=document.getElementById('text1') 
  24.   var text2=document.getElementById('text2') 
  25.   btn1.onclick=function (){ 
  26.    //var reg=/<.+>/g 
  27.    var reg=/<[^<>]+>/g //1、全局匹配g肯定忘记写 2、<>标签中不能包含标签实现过滤HTML标签 
  28.    text2.value=text1.value.replace(reg,'') 
  29.   } 
  30.  </script> 
  31. </body> 
  32. </html> 
js 正则表达式去除html字符中所有的标签（img标签除外）

废话不多说，直接上代码：

description.replace(/<(?!img).*?>/g, "");

如果保留img,p标签，则为：

description.replace(/<(?!img|p|/p).*?>/g, "");

在js中/需要用转义字符。

通用 HTML 标签区配正则

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

  1. <script type="text/javascript">  
  2. var str = "<br /><br/><br><br ><中文><div><div id=a>无忧脚本<img src="http://bbs.51js.com/images/default/logo.gif" width="191" height='75' border=0 onload="if(testver>0 && testver<500)alert('test');" onerror='alert("test")' /><img src=xxx alt="hello just a test!"></div><hr ><script type="test/javascript" defer>alert("just a test!");</script>Hello.<input type=text value="无忧脚本"><br / ><img "" ></ ><!-- 注释 -->< ucren><!-- 再<注>释 --><img alt=' title='"' /><b>123</b>1<2<3,3<4>1&lt;b&gt;<img src="http://bbs.51js.com/images/old51js/logo.gif" /><!-- 三注释>>> -->";  
  3. var reg = /<(?:(?:/?[A-Za-z]w*(?:[=s](['"]?)[sS]*?)*)|(?:!--[sS]*?--))/?>/g;  
  4. alert(str.match(reg).join(" ---------------------------------------------------- "));  
  5. </script>  

在线测试

  1.   
  2. <script type="text/javascript">  
  3. var str = "<br>[br/]<br><中文><div><div id=a>无忧脚本<img src="http://bbs.51js.com/images/default/logo.gif" width="191" height='75' border=0 onload="if(testver>0 && testver<500)alert('test');"  
  4.  onerror='alert("test")' /><img src=xxx alt="hello 
  5. just a test!"></div><hr ><script type="test/javascript" defer>alert("just a test!");</script>Hello.<input type=text value="无忧脚本"><br / ><img "" ></ ><!-- 注释 -->< ucren><!-- 再<注>释 --><img alt=' title='"' /><b>123</b>1<2<3,3<4>1&lt;b&gt;<img src="http://bbs.51js.com/images/old51js/logo.gif" /><!-- 三注释>>> -->";  
  6. var reg = /<(?:(?:/?[A-Za-z]w*(?:[=s](['"]?)[sS]*?)*)|(?:!--[sS]*?--))/?>/g;  
  7. alert(str.match(reg).join(" 
  8. ---------------------------------------------------- 
  9. "));  
  10. </script>  

有朋友留言说Java直接使用的话会报错。我后来查了一下，发现Java正则引擎支持的特性相对比较少。在1.6版本中不能使用命名组（貌似1.7的时候开始支持了），否则会报以下错误，更别说平衡组了。因此感觉要实现无限级的嵌套匹配不大现实。

java.util.regex.PatternSyntaxException: Look-behind group does not have an obvious maximum length near index XX

在网上搜了好久也没找到完美的解决方案。不过，我们可以实现有限级Html嵌套标签匹配。思路相对于无限级来说就简单了好多，不需要那么多高级的特性。
示例：

<div id='container'><BR> <div style='background-color:gray;' id='footer'><BR> <a id='gotop' href='#' onclick='MGJS.goTop();return false;'>Top</a><BR> <a id='powered' href='http://wordpress.org/'>WordPress</a><BR> <div id='copyright'><BR> Copyright &copy; 2009 简单生活 —— Kevin Yang的博客<BR> </div><BR> <div id='themeinfo'><BR> Theme by <a href='http://www.neoease.com/'>mg12</a>. Valid <a href='http://validator.w3.org/check?uri=referer'>XHTML 1.1</a><BR> and <a href='http://jigsaw.w3.org/css-validator/'>CSS 3</a>.<BR> </div><BR> </div><BR></div>

在上面这个示例中，我们打算匹配id为footer的这个嵌套div，而且假设我们预先知道footer这个div里面最多只会嵌套一级div。更多级的情况我们一会儿再讲。
footer的开始和结束标签匹配很简单：

<div [^>]*id='footer'[^>]*>......(这里的省略号是一会要填写的)</div>

夹在开始和结束标签之间的内容无非有两种情况：
内容A: div标签，并且此div内无嵌套div
内容B: 任意其他内容
然后就是这两种内容的不断重复而已。正则表示如下：

(<div[^>]*>.*?</div>|.)*?

注意最后面的问号必须要加上，否则由于正则的贪婪匹配特性，footer的闭合标签会匹配失误。
OK了，匹配最多嵌套一级div的正则表达式如下：

<div [^>]*id='footer'[^>]*>(<div[^>]*>.*?</div>|.)*?</div>

那么如果footer标签里头最多会嵌套两级div的话怎么办呢？
其实也不难，我们只需要把上面的“内容A”部分中的点号稍作替换即可。修改如下：

<div [^>]*id='footer'[^>]*>(<div[^>]*>(<div[^>]*>.*?</div>|.)*?</div>|.)*?</div>

到这里你可能就知道，如果要匹配最多嵌套三级div的话，正则应该怎么写了：

<div [^>]*id='footer'[^>]*>(<div[^>]*>(<div[^>]*>(<div[^>]*>.*?</div>|.)*?</div>|.)*?</div>|.)*?</div>

所以实际上，只要你的html结构不是特别复杂的话，也就是说嵌套不会很深的话，那么你完全可以使用这种方式来匹配嵌套html标签。

这个正则在Java和Javascript中都可以使用，因为它没有用到任何高级特性。

接着补充

查找所有的TD区域(最短):

<tds*.*>s*.*</td>

查找所有的TR:

<tr.*(?=>)(.| )*?</tr>

查找所有的TD:

<td.*(?=>)(.| )*?</td>

正则表达式匹配Html标签

例1.
以下是一段Html代码

  1. <table boder="0" width="11%" class="somestory"> 
  2. <tr> 
  3. <td width="100%"> 
  4. <p align="center">其它内容...</p> 
  5. </td> 
  6. </tr> 
  7. </table> 
  8. <table border="0" width="11%" class="headline"> 
  9. <tr> 
  10. <td width="100%"> 
  11. <p align="center">典经HTML正则表达式！</p> 
  12. </td> 
  13. </tr> 
  14. </table> 
  15. <table boder="0" width="11%" class="someotherstory"> 
  16. <tr> 
  17. <td width="100%"> 
  18. <p align="center">其它内容...</p> 
  19. </td> 
  20. </tr> 
  21. </table> 

正则表过式：<table.*(?=headline)
说明：正则表达式匹配表格开始标记，能够返回开始标记直至 “headline”之间的所有内容（换行除外）；
就是以上红色标示出来的部分。
原理：
<table                           //匹配的开始部分
.*                                   //除换行外的所有字符
(?=headline)               //零宽度正预测先行断言，匹配以 headline 结尾的单词的前面部分(除了 headline 以外的部分)

例2.

  1. <table boder="0" width="11%" class="somestory"> 
  2. <tr> 
  3. <td width="100%"> 
  4. <p align="center">其它内容...</p> 
  5. </td> 
  6. </tr> 
  7. </table> 
  8. <table border="0" width="11%" class="headline"> 
  9. <tr> 
  10. <td width="100%"> 
  11. <p align="center">典经HTML正则表达式！</p> 
  12. </td> 
  13. </tr> 
  14. </table> 
  15. <table boder="0" width="11%" class="someotherstory"> 
  16. <tr> 
  17. <td width="100%"> 
  18. <p align="center">其它内容...</p> 
  19. </td> 
  20. </tr> 
  21. </table> 
 

正则表达式：<table.*(?=headline)(.| )*?</table>
说明：匹配最长的以 <table border="0" width="11%" class=" 开始， 以</table>结束的字符串，就是以上以红色标示出来的部分。

原理：

<table.*(?=headline)                  //参见记录1的说明
(.| )                                             //指示在两个或多个项之间进行选择，(zlf)ood 与 "zood" 或 "food" 匹配
*?                                                //应与上一个 (.| ) 联合起来看,  .*？ 就意味着匹配任意数量的重复，但是在能使整个匹配成功的前提下使用最少的重复，懒惰模式。
</table>                                     //匹配的结束标记

注意：“(.| )”后面的 "*" 匹配 0 个到多个任意字符，而“？”使得“*”匹配范围最小化，即在找到表达式的下一部分之前匹配尽可能少的字符。</table> 是表格的结束标记.

 例3.

  1. <tableboder="0" width="11%" class="somestory"> 
  2. <tr> 
  3. <td width="100%"> 
  4. <p align="center">其它内容...</p> 
  5. </td> 
  6. </tr> 
  7. </table> 
  8. <tableborder="0" width="11%" class="headline"> 
  9. <tr> 
  10. <td width="100%"> 
  11. <p align="center">典经HTML正则表达式！</p> 
  12. </td> 
  13. </tr> 
  14. </table> 
  15. <tableboder="0" width="11%" class="someotherstory"> 
  16. <tr> 
  17. <td width="100%"> 
  18. <p align="center">其它内容...</p> 
  19. </td> 
  20. </tr> 
  21. </table> 
 

正则表达式：<(?<tag>[^s>]+)[^>]*>(.| )*?</k<tag>>
说明：匹配成对的HTML标签，它将会匹配Html标签及标签中的内容，本例分三段匹配三个<table>标签及</table>中的内容。
原理：
<                                    //html标签中的 <
(?<tag>[^s>]+)            // (?<name>), 分组命名的方式，[^s>]：非任何空白字符及“>”至少匹配一次
[^>]*>                            //非“>”匹配 0 到 n 次，及html的标签“>”.
(.| )                              //在两个或多个项之间时行选择，(zlf)ood 与 "zood" 或 "food" 匹配.
*?                                  // 应与上一个(.| )联合起来看， .*？ 就意味着匹配任意数量的重复，但是在能使整个匹配成功的前提下使用最少的重复，懒惰模式。
</k<tag>>                    //反向引用命名的组，语法为 k<name>， 及html 标签“>”

注意：“(.| )”后面的 "*" 匹配 0 个到多个任意字符，而“？”使得“*”匹配范围最小化，即在找到表达式的下一部分之前匹配尽可能少的字符。

本例使用了分组命名及反向引用命名组的概念。

正则表达匹配中文

匹配中文字符的正则表达式：   [u4e00-u9fa5]
1、先用js把中文转换16进制码：d.innerHTML = escape("你们"); 得到 %u4F60%u4EEC， 即 u4F60u4EEC
2、var arr = str.match(/u4F60u4EEC/g);
3、u4F60为单个汉字“你”.
4、以上测试程序为javascript

到此这篇关于Java/Js下使用正则表达式匹配嵌套Html标签的文章就介绍到这了,更多相关正则表达式匹配嵌套Html标签 内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家！

  • Java
  • JS
  • 正则表达式
  • HTML

    • 延伸 · 阅读

    精彩推荐
    最近更新
    编辑推荐
    阅读排行
    热门标签
    非贪婪匹配 　 替换重复字符 　 JS正则表达式 　 Javascript正则表达式 　 HyperScriptExpression 　 非贪婪模式 　 previousSibling 　 reg_replace 　 eregi_replace 　 RegexBuddy 　 自动链接 　 超文本流 　 正则表达式中文 　 C#正则表达式 　 align 　 全局替换 　 基本概念 　 超连接 　 regular 　 校验数据 　 截字符串 　 ubb代码 　 正则表达式语法 　 正则表达式验证 　 输入限制 　 ubbcodeasp 　 正则表达式教程 　 正则表达式工具 　 Match Tracer 　 清空标签 　
    © 2019-2023 服务器之家(www.zzvips.com) 版权所有关于我们联系我们版权申明网站地图