js正則表達式替換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>
廢話不多說,直接上代碼:
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');" 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]*?)*)|(?:!--[sS]*?--))/?>/g;
- alert(str.match(reg).join(" ---------------------------------------------------- "));
- </script>
在線測試
- <script type="text/javascript">
- 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');"
- 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]*?)*)|(?:!--[sS]*?--))/?>/g;
- alert(str.match(reg).join("
- ----------------------------------------------------
- "));
- </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 © 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代碼
- <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)(.| )*?</table>
說明:匹配最長的以 <table border="0" width="11%" class=" 開始, 以</table>結束的字符串,就是以上以紅色標示出來的部分。
原理:
<table.*(?=headline) //參見記錄1的說明
(.| ) //指示在兩個或多個項之間進行選擇,(zlf)ood 與 "zood" 或 "food" 匹配
*? //應與上一個 (.| ) 聯合起來看, .*? 就意味著匹配任意數量的重復,但是在能使整個匹配成功的前提下使用最少的重復,懶惰模式。
</table> //匹配的結束標記
注意:“(.| )”后面的 "*" 匹配 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>]+)[^>]*>(.| )*?</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標簽 內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家!