JavaJs下使⽤正则表达式匹配嵌套Html标签
js正则表达式替换HTML标签以及空格( )
js代码:
function filter(text) {
var reg = /<[^<>]+>/g;//1、全局匹配g肯定忘记写,2、<>标签中不能包含标签实现过滤HTML标签
text = place(reg, '');//替换HTML标签
text = place(/ /ig, '');//替换HTML空格
return text;
};
在angularJS中使⽤过滤器过滤富⽂本数据
app.filter('qxhtml', function () {
return function (text) {
var reg = /<[^<>]+>/g;href标签怎么用
text = place(reg, '');
text = place(/ /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 ElementById('btn1')
var ElementById('text1')
var ElementById('text2')
//var reg=/<.+>/g
var reg=/<[^<>]+>/g //1、全局匹配g肯定忘记写 2、<>标签中不能包含标签实现过滤HTML标签
text2.value=place(reg,'')
}
</script>
</body>
</html>
js 正则表达式去除html字符中所有的标签(img标签除外)
废话不多说,直接上代码:
如果保留img,p标签,则为:
在js中/需要⽤转义字符。
通⽤ HTML 标签区配正则
最近看⽹站⽇志,发现有⼈在博客上转了我不知道⼏年前写的⼀个匹配 HTML 标签的正则,刚好最近也在做⼀些相关的事情,顿时来了兴趣。就拿回来改改,成了下⾯这样,可能会有⼀些 case 遗漏,
欢迎修改,已知在内嵌 <script> 复杂内容的处理能⼒较弱,不过对纯 HTML 来说已经够⽤,拿来做⼀些分析⼯具还是不错滴。
<script type="text/javascript">
var str = "<br /><br/><br><br ><;中⽂><div><div id=a>⽆忧脚本<img src=\"bbs.51js/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\n var reg = /<(?:(?:\/?[A-Za-z]\w*\b(?:[=\s](['"]?)[\s\S]*?\1)*)|(?:!--[\s\S]*?--))\/?>/g;
alert(str.match(reg).join("\n----------------------------------------------------\n"));
</script>
在线测试
<script
type="text/javascript">
全选注:引⼊外部Js需再刷新⼀下页⾯才能执⾏]
中⽂><div><div id=a>⽆
忧脚本<img
有朋友留⾔说Java直接使⽤的话会报错。我后来查了⼀下,发现Java正则引擎⽀持的特性相对⽐较少。在1.6版本中不能使⽤命名组(貌似1.7的时候开始⽀持了),否则会报以下错误,更别说平衡组了。因此感觉要实现⽆限级的嵌套匹配不⼤现实。
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='Top();return false;'>Top</a><BR> <a id='powered'
href='/'>WordPress</a><BR> <div id='copyright'><BR> Copyright © 2009 简单⽣活 —— Kevin Yang的博客<BR> </div><BR> <div id='themeinfo'><BR> Theme by
<a href='ase/'>mg12</a>. Valid <a href='/check?uri=referer'>XHTML 1.1</a><BR> and <a href='/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
到此这篇关于Java/Js下使⽤正则表达式匹配嵌套Html标签的⽂章就介绍到这了,更多相关正则表达式匹配嵌套Html标签内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持!

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。