正则表达式匹配嵌套Html标签 Java/Js下使用正则表达式匹配嵌套Html标签
人气:0js正则表达式替换HTML标签以及空格( )
js代码：
function filter(text) {
var reg = /<[^<>]+>/g;//1、全局匹配g肯定忘记写,2、<>标签中不能包含标签实现过滤HTML标签
text = text.replace(reg, '');//替换HTML标签
text = text.replace(/ /ig, '');//替换HTML空格
return text;
};
在angularJS中使用过滤器过滤富文本数据
app.filter('qxhtml', function () {
return function (text) {
var reg = /<[^<>]+>/g;
text = text.replace(reg, '');
text = text.replace(/ /ig, '');
if (text.length > 50) {
text = text.substring(0, 50) + "...";
}
return text;
};
});
使用过滤器
<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标签过滤掉，转化为纯文本输出
三、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤HTML标签</title>
<style type="text/css">
textarea{
width: 60%;
font-size: 18px;
background: rgba(100,200,50,0.3);
}
#text2{
background:rgba(200,100,50,0.3);
}
</style>
</head>
<body>
<textarea id="text1" rows="10" cols="50"></textarea><br><br>
<input type="button" id="btn1" value="过滤HTML标签"><br><br>
<textarea id="text2" rows="10" cols="50"></textarea>
<script type="text/javascript">
var btn1=document.getElementById('btn1')
var text1=document.getElementById('text1')
var text2=document.getElementById('text2')
btn1.onclick=function (){
//var reg=/<.+>/g
var reg=/<[^<>]+>/g //1、全局匹配g肯定忘记写 2、<>标签中不能包含标签实现过滤HTML标签
text2.value=text1.value.replace(reg,'')
}
</script>
</body>
</html>
js 正则表达式去除html字符中所有的标签（img标签除外）
废话不多说，直接上代码：
description.replace(/<(?!img).*?>/g, "");
如果保留img,p标签，则为：
description.replace(/<(?!img|p|\/p).*?>/g, "");
在js中/需要用转义字符。
通用 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');\" \n onerror='alert(\"test\")' /><img src=xxx alt=\"hello\njust 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*\b(?:[=\s](['"]?)[\s\S]*?\1)*)|(?:!--[\s\S]*?--))\/?>/g;
alert(str.match(reg).join("\n----------------------------------------------------\n"));
</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中都可以使用，因为它没有用到任何高级特性。
接着补充
查找所有的TD区域(最短):
<td\s*.*>\s*.*<\/td>
查找所有的TR:
<tr.*(?=>)(.|\n)*?</tr>
查找所有的TD:
<td.*(?=>)(.|\n)*?</td>
正则表达式匹配Html标签
例1.
以下是一段Html代码
<table boder="0" width="11%" class="somestory"> <tr> <td width="100%"> <p align="center">其它内容...</p> </td> </tr> </table> <table border="0" width="11%" class="headline"> <tr> <td width="100%"> <p align="center">典经HTML正则表达式！</p> </td> </tr> </table> <table boder="0" width="11%" class="someotherstory"> <tr> <td width="100%"> <p align="center">其它内容...</p> </td> </tr> </table>
正则表过式：<table.*(?=headline)
说明：正则表达式匹配表格开始标记，能够返回开始标记直至 “headline”之间的所有内容（换行除外）；
就是以上红色标示出来的部分。
原理：
<table //匹配的开始部分
.* //除换行外的所有字符
(?=headline) //零宽度正预测先行断言，匹配以 headline 结尾的单词的前面部分(除了 headline 以外的部分)
例2.
<table boder="0" width="11%" class="somestory"> <tr> <td width="100%"> <p align="center">其它内容...</p> </td> </tr> </table> <table border="0" width="11%" class="headline"> <tr> <td width="100%"> <p align="center">典经HTML正则表达式！</p> </td> </tr> </table> <table boder="0" width="11%" class="someotherstory"> <tr> <td width="100%"> <p align="center">其它内容...</p> </td> </tr> </table>
正则表达式：<table.*(?=headline)(.|\n)*?</table>
说明：匹配最长的以 <table border="0" width="11%" class=" 开始， 以</table>结束的字符串，就是以上以红色标示出来的部分。
原理：
<table.*(?=headline) //参见记录1的说明
(.|\n) //指示在两个或多个项之间进行选择，(zlf)ood 与 "zood" 或 "food" 匹配
*? //应与上一个 (.|\n) 联合起来看, .*？ 就意味着匹配任意数量的重复，但是在能使整个匹配成功的前提下使用最少的重复，懒惰模式。
</table> //匹配的结束标记
注意：“(.|\n)”后面的 "*" 匹配 0 个到多个任意字符，而“？”使得“*”匹配范围最小化，即在找到表达式的下一部分之前匹配尽可能少的字符。</table> 是表格的结束标记.
例3.
<tableboder="0" width="11%" class="somestory"> <tr> <td width="100%"> <p align="center">其它内容...</p> </td> </tr> </table> <tableborder="0" width="11%" class="headline"> <tr> <td width="100%"> <p align="center">典经HTML正则表达式！</p> </td> </tr> </table> <tableboder="0" width="11%" class="someotherstory"> <tr> <td width="100%"> <p align="center">其它内容...</p> </td> </tr> </table>
正则表达式：<(?<tag>[^\s>]+)[^>]*>(.|\n)*?</\k<tag>>
说明：匹配成对的HTML标签，它将会匹配Html标签及标签中的内容，本例分三段匹配三个<table>标签及</table>中的内容。
原理：
< //html标签中的 <
(?<tag>[^\s>]+) // (?<name>), 分组命名的方式，[^\s>]：非任何空白字符及“>”至少匹配一次
[^>]*> //非“>”匹配 0 到 n 次，及html的标签“>”.
(.|\n) //在两个或多个项之间时行选择，(zlf)ood 与 "zood" 或 "food" 匹配.
*? // 应与上一个(.|\n)联合起来看， .*？ 就意味着匹配任意数量的重复，但是在能使整个匹配成功的前提下使用最少的重复，懒惰模式。
</\k<tag>> //反向引用命名的组，语法为 \k<name>， 及html 标签“>”
注意：“(.|\n)”后面的 "*" 匹配 0 个到多个任意字符，而“？”使得“*”匹配范围最小化，即在找到表达式的下一部分之前匹配尽可能少的字符。
本例使用了分组命名及反向引用命名组的概念。
正则表达匹配中文
匹配中文字符的正则表达式： [\u4e00-\u9fa5]
1、先用js把中文转换16进制码：d.innerHTML = escape("你们"); 得到 %u4F60%u4EEC， 即 \u4F60\u4EEC
2、var arr = str.match(/\u4F60\u4EEC/g);
3、\u4F60为单个汉字“你”.
4、以上测试程序为javascript
加载全部内容