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

通用 HTML 标签区配正则

最近看网站日志，发现有人在博客上转了我不知道几年前写的一个匹配 HTML 标签的正则，刚好最近也在做一些相关的事情，顿时来了兴趣。就拿回来改改，成了下面这样，可能会有一些 case 遗漏，欢迎修改，已知在内嵌 <script> 复杂内容的处理能力较弱，不过对纯 HTML 来说已经够用，拿来做一些分析工具还是不错滴。
复制代码 代码如下:
<script type="text/javascript">
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<b><img src="http://bbs.51js.com/images/old51js/logo.gif" /><！-- 三注释>>> -->";
var reg = /<（？:（？:/？[A-Za-z]w*（？:[=s]（[""]？）[sS]*？1）*）|（？:！--[sS]*？--））/？>/g;
alert（str.match（reg）.join（" ---------------------------------------------------- "））;
</script>


<script type="text/javascript"> var str = "<br>[br/]<br><中文>无忧脚本<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！"><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<b><img src="http://bbs.51js.com/images/old51js/logo.gif" />"; var reg = /<（？:（？:/？[A-Za-z]w*（？:[=s]（[""]？）[sS]*？1）*）|（？:！--[sS]*？--））/？>/g; alert（str.match（reg）.join（" ---------------------------------------------------- "））; </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

有朋友留言说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 © 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中都可以使用，因为它没有用到任何高级特性。