快捷導(dǎo)航

無(wú)殤 javascript正則練習(xí)器

更新時(shí)間：2007年06月28日 00:00:00 作者：

無(wú)殤寫的javascript正則練習(xí)器，比較不錯(cuò)，最后生成替換參數(shù)，美中不足的就是替換無(wú)法使用，本人也試著修改因?yàn)樘鎿Q參數(shù)過(guò)多而無(wú)法實(shí)現(xiàn)，希望會(huì)的朋友修正一下

簡(jiǎn)單修正版本，對(duì)于帶函數(shù)的替換暫時(shí)無(wú)法完成，普通替換已經(jīng)可以了
http://chabaoo.cn/tools/regex_test.htm

<html> <head> <title>無(wú)殤 - 正則練習(xí)器</title> <style type="text/css">  </style> </head>  <body> <span id="window2" style="display:none;"> <center><input type=button value="正則例子詳解" onclick="document.getElementById('window2').style.display='none';document.getElementById('window3').style.display='inline';" class=bu style="width:200px;"></center> 一個(gè)正則表達(dá)式就是由普通字符（例如字符 a 到 z）以及特殊字符（稱為<I>元字符</I>）組成的文字模式。該模式描述在查找文字主體時(shí)待匹配的一個(gè)或多個(gè)字符串。正則表達(dá)式作為一個(gè)模板，將某個(gè)字符模式與所搜索的字符串進(jìn)行匹配。</P> <P>這里有一些可能會(huì)遇到的正則表達(dá)式示例：</P> <TABLE border=1 cellspacing=0 cols=3 frame=box rules=all> <TR VALIGN="top"> <TH width=30%>JScript</TH> <TH width=30%>VBScript</TH> <TH width=40%>匹配</TH> </TR> <TR VALIGN="top"> <TD width=30%>/^\[ \t]*$/</TD> <TD width=30%>"^\[ \t]*$"</TD> <TD width=40%>匹配一個(gè)空白行。</TD> </TR> <TR VALIGN="top"> <TD width=30%>/\d{2}-\d{5}/</TD> <TD width=30%>"\d{2}-\d{5}"</TD> <TD width=40%>驗(yàn)證一個(gè)ID 號(hào)碼是否由一個(gè)2位數(shù)字，一個(gè)連字符以及一個(gè)5位數(shù)字組成。</TD> </TR> <TR VALIGN="top"> <TD width=30%>/&lt;(.*)&gt;.*&lt;\/\1&gt;/</TD> <TD width=30%>"&lt;(.*)&gt;.*&lt;\/\1&gt;"</TD> <TD width=40%>匹配一個(gè) HTML 標(biāo)記。</TD> </TR> </TABLE> <P>下表是元字符及其在正則表達(dá)式上下文中的行為的一個(gè)完整列表：</P> <TABLE border=1 cellspacing=0 cols=2 frame=box rules=all> <TR VALIGN="top"> <TH width=16%>字符</TH> <TH width=84%>描述</TH> </TR> <TR VALIGN="top"> <TD width=16%>\</TD> <TD width=84%>將下一個(gè)字符標(biāo)記為一個(gè)特殊字符、或一個(gè)原義字符、或一個(gè) 后向引用、或一個(gè)八進(jìn)制轉(zhuǎn)義符。例如，'n' 匹配字符 "n"。'\n' 匹配一個(gè)換行符。序列 '\\' 匹配 "\" 而 "\(" 則匹配 "("。</TD> </TR> <TR VALIGN="top"> <TD width=16%>^</TD> <TD width=84%>匹配輸入字符串的開始位置。如果設(shè)置了 <B>RegExp</B> 對(duì)象的 <B>Multiline</B> 屬性，^ 也匹配 '\n' 或 '\r' 之后的位置。</TD> </TR> <TR VALIGN="top"> <TD width=16%>$</TD> <TD width=84%>匹配輸入字符串的結(jié)束位置。如果設(shè)置了<B>RegExp</B> 對(duì)象的 <B>Multiline</B> 屬性，$ 也匹配 '\n' 或 '\r' 之前的位置。</TD> </TR> <TR VALIGN="top"> <TD width=16%>*</TD> <TD width=84%>匹配前面的子表達(dá)式零次或多次。例如，zo* 能匹配 "z" 以及 "zoo"。 * 等價(jià)于{0,}。</TD> </TR> <TR VALIGN="top"> <TD width=16%>+</TD> <TD width=84%>匹配前面的子表達(dá)式一次或多次。例如，'zo+' 能匹配 "zo" 以及 "zoo"，但不能匹配 "z"。+ 等價(jià)于 {1,}。</TD> </TR> <TR VALIGN="top"> <TD width=16%>?</TD> <TD width=84%>匹配前面的子表達(dá)式零次或一次。例如，"do(es)?" 可以匹配 "do" 或 "does" 中的"do" 。? 等價(jià)于 {0,1}。</TD> </TR> <TR VALIGN="top"> <TD width=16%>{<I>n</I>}</TD> <TD width=84%><I>n</I> 是一個(gè)非負(fù)整數(shù)。匹配確定的 <I>n</I> 次。例如，'o{2}' 不能匹配 "Bob" 中的 'o'，但是能匹配 "food" 中的兩個(gè) o。</TD> </TR> <TR VALIGN="top"> <TD width=16%>{<I>n</I>,}</TD> <TD width=84%><I>n</I> 是一個(gè)非負(fù)整數(shù)。至少匹配<I>n</I> 次。例如，'o{2,}' 不能匹配 "Bob" 中的 'o'，但能匹配 "foooood" 中的所有 o。'o{1,}' 等價(jià)于 'o+'。'o{0,}' 則等價(jià)于 'o*'。</TD> </TR> <TR VALIGN="top"> <TD width=16%>{<I>n</I>,<I>m</I>}</TD> <TD width=84%><I>m</I> 和 <I>n</I> 均為非負(fù)整數(shù)，其中<I>n</I> &lt;= <I>m</I>。最少匹配 <I>n</I> 次且最多匹配 <I>m</I> 次。劉， "o{1,3}" 將匹配 "fooooood" 中的前三個(gè) o。'o{0,1}' 等價(jià)于 'o?'。請(qǐng)注意在逗號(hào)和兩個(gè)數(shù)之間不能有空格。</TD> </TR> <TR VALIGN="top"> <TD width=16%>?</TD> <TD width=84%>當(dāng)該字符緊跟在任何一個(gè)其他限制符 (*, +, ?, {<I>n</I>}, {<I>n</I>,}, {<I>n</I>,<I>m</I>}) 后面時(shí)，匹配模式是非貪婪的。非貪婪模式盡可能少的匹配所搜索的字符串，而默認(rèn)的貪婪模式則盡可能多的匹配所搜索的字符串。例如，對(duì)于字符串 "oooo"，'o+?' 將匹配單個(gè) "o"，而 'o+' 將匹配所有 'o'。</TD> </TR> <TR VALIGN="top"> <TD width=16%>.</TD> <TD width=84%>匹配除 "\n" 之外的任何單個(gè)字符。要匹配包括 '\n' 在內(nèi)的任何字符，請(qǐng)使用象 '[.\n]' 的模式。</TD> </TR> <TR VALIGN="top"> <TD width=16%>(<I>pattern</I>)</TD> <TD width=84%>匹配<I>pattern</I> 并獲取這一匹配。所獲取的匹配可以從產(chǎn)生的 Matches 集合得到，在VBScript 中使用 <B>SubMatches</B> 集合，在JScript 中則使用 <B>$0</B>…<B>$9</B> 屬性。要匹配圓括號(hào)字符，請(qǐng)使用 '$' 或 '$'。</TD> </TR> <TR VALIGN="top"> <TD width=16%>(?:<I>pattern</I>)</TD> <TD width=84%>匹配 <I>pattern</I> 但不獲取匹配結(jié)果，也就是說(shuō)這是一個(gè)非獲取匹配，不進(jìn)行存儲(chǔ)供以后使用。這在使用 "或" 字符 (|) 來(lái)組合一個(gè)模式的各個(gè)部分是很有用。例如， 'industr(?:y|ies) 就是一個(gè)比 'industry|industries' 更簡(jiǎn)略的表達(dá)式。</TD> </TR> <TR VALIGN="top"> <TD width=16%>(?=<I>pattern</I>)</TD> <TD width=84%>正向預(yù)查，在任何匹配 <I>pattern</I> 的字符串開始處匹配查找字符串。這是一個(gè)非獲取匹配，也就是說(shuō)，該匹配不需要獲取供以后使用。例如， 'Windows (?=95|98|NT|2000)' 能匹配 "Windows 2000" 中的 "Windows" ，但不能匹配 "Windows 3.1" 中的 "Windows"。預(yù)查不消耗字符，也就是說(shuō)，在一個(gè)匹配發(fā)生后，在最后一次匹配之后立即開始下一次匹配的搜索，而不是從包含預(yù)查的字符之后開始。</TD> </TR> <TR VALIGN="top"> <TD width=16%>(?!<I>pattern</I>)</TD> <TD width=84%>負(fù)向預(yù)查，在任何不匹配Negative lookahead matches the search string at any point where a string not matching <I>pattern</I> 的字符串開始處匹配查找字符串。這是一個(gè)非獲取匹配，也就是說(shuō)，該匹配不需要獲取供以后使用。例如'Windows (?!95|98|NT|2000)' 能匹配 "Windows 3.1" 中的 "Windows"，但不能匹配 "Windows 2000" 中的 "Windows"。預(yù)查不消耗字符，也就是說(shuō)，在一個(gè)匹配發(fā)生后，在最后一次匹配之后立即開始下一次匹配的搜索，而不是從包含預(yù)查的字符之后開始 </TD> </TR> <TR VALIGN="top"> <TD width=16%><I>x</I>|<I>y</I></TD> <TD width=84%>匹配 <I>x</I> 或 <I>y</I>。例如，'z|food' 能匹配 "z" 或 "food"。'(z|f)ood' 則匹配 "zood" 或 "food"。 </TD> </TR> <TR VALIGN="top"> <TD width=16%>[<I>xyz</I>]</TD> <TD width=84%>字符集合。匹配所包含的任意一個(gè)字符。例如， '[abc]' 可以匹配 "plain" 中的 'a'。 </TD> </TR> <TR VALIGN="top"> <TD width=16%>[^<I>xyz</I>]</TD> <TD width=84%>負(fù)值字符集合。匹配未包含的任意字符。例如， '[^abc]' 可以匹配 "plain" 中的'p'。 </TD> </TR> <TR VALIGN="top"> <TD width=16%>[<I>a-z</I>]</TD> <TD width=84%>字符范圍。匹配指定范圍內(nèi)的任意字符。例如，'[a-z]' 可以匹配 'a' 到 'z' 范圍內(nèi)的任意小寫字母字符。 </TD> </TR> <TR VALIGN="top"> <TD width=16%>[^<I>a-z</I>]</TD> <TD width=84%>負(fù)值字符范圍。匹配任何不在指定范圍內(nèi)的任意字符。例如，'[^a-z]' 可以匹配任何不在 'a' 到 'z' 范圍內(nèi)的任意字符。 </TD> </TR> <TR VALIGN="top"> <TD width=16%>\b</TD> <TD width=84%>匹配一個(gè)單詞邊界，也就是指單詞和空格間的位置。例如， 'er\b' 可以匹配"never" 中的 'er'，但不能匹配 "verb" 中的 'er'。 </TD> </TR> <TR VALIGN="top"> <TD width=16%>\B</TD> <TD width=84%>匹配非單詞邊界。'er\B' 能匹配 "verb" 中的 'er'，但不能匹配 "never" 中的 'er'。</TD> </TR> <TR VALIGN="top"> <TD width=16%>\c<I>x</I></TD> <TD width=84%>匹配由<I>x</I>指明的控制字符。例如， \cM 匹配一個(gè) Control-M 或回車符。 <I>x</I> 的值必須為 A-Z 或 a-z 之一。否則，將 c 視為一個(gè)原義的 'c' 字符。 </TD> </TR> <TR VALIGN="top"> <TD width=16%>\d</TD> <TD width=84%>匹配一個(gè)數(shù)字字符。等價(jià)于 [0-9]。 </TD> </TR> <TR VALIGN="top"> <TD width=16%>\D</TD> <TD width=84%>匹配一個(gè)非數(shù)字字符。等價(jià)于 [^0-9]。 </TD> </TR> <TR VALIGN="top"> <TD width=16%>\f</TD> <TD width=84%>匹配一個(gè)換頁(yè)符。等價(jià)于 \x0c 和 \cL。</TD> </TR> <TR VALIGN="top"> <TD width=16%>\n</TD> <TD width=84%>匹配一個(gè)換行符。等價(jià)于 \x0a 和 \cJ。</TD> </TR> <TR VALIGN="top"> <TD width=16%>\r</TD> <TD width=84%>匹配一個(gè)回車符。等價(jià)于 \x0d 和 \cM。</TD> </TR> <TR VALIGN="top"> <TD width=16%>\s</TD> <TD width=84%>匹配任何空白字符，包括空格、制表符、換頁(yè)符等等。等價(jià)于 [&nbsp;\f\n\r\t\v]。</TD> </TR> <TR VALIGN="top"> <TD width=16%>\S</TD> <TD width=84%>匹配任何非空白字符。等價(jià)于 [^&nbsp;\f\n\r\t\v]。</TD> </TR> <TR VALIGN="top"> <TD width=16%>\t</TD> <TD width=84%>匹配一個(gè)制表符。等價(jià)于 \x09 和 \cI。</TD> </TR> <TR VALIGN="top"> <TD width=16%>\v</TD> <TD width=84%>匹配一個(gè)垂直制表符。等價(jià)于 \x0b 和 \cK。</TD> </TR> <TR VALIGN="top"> <TD width=16%>\w</TD> <TD width=84%>匹配包括下劃線的任何單詞字符。等價(jià)于'[A-Za-z0-9_]'。 </TD> </TR> <TR VALIGN="top"> <TD width=16%>\W</TD> <TD width=84%>匹配任何非單詞字符。等價(jià)于 '[^A-Za-z0-9_]'。 </TD> </TR> <TR VALIGN="top"> <TD width=16%>\x<I>n</I></TD> <TD width=84%>匹配 <I>n</I>，其中 <I>n</I> 為十六進(jìn)制轉(zhuǎn)義值。十六進(jìn)制轉(zhuǎn)義值必須為確定的兩個(gè)數(shù)字長(zhǎng)。例如， '\x41' 匹配 "A"。'\x041' 則等價(jià)于 '\x04' &amp; "1"。正則表達(dá)式中可以使用 ASCII 編碼。.</TD> </TR> <TR VALIGN="top"> <TD width=16%>\<I>num</I></TD> <TD width=84%>匹配 <I>num</I>，其中 <I>num</I> 是一個(gè)正整數(shù)。對(duì)所獲取的匹配的引用。例如，'(.)\1' 匹配兩個(gè)連續(xù)的相同字符。 </TD> </TR> <TR VALIGN="top"> <TD width=16%>\<I>n</I></TD> <TD width=84%>標(biāo)識(shí)一個(gè)八進(jìn)制轉(zhuǎn)義值或一個(gè)后向引用。如果 \<I>n</I> 之前至少 <I>n</I> 個(gè)獲取的子表達(dá)式，則 <I>n</I> 為后向引用。否則，如果 <I>n</I> 為八進(jìn)制數(shù)字 (0-7)，則 <I>n</I> 為一個(gè)八進(jìn)制轉(zhuǎn)義值。</TD> </TR> <TR VALIGN="top"> <TD width=16%>\<I>nm</I></TD> <TD width=84%>標(biāo)識(shí)一個(gè)八進(jìn)制轉(zhuǎn)義值或一個(gè)后向引用。如果 \<I>nm</I> 之前至少有is preceded by at least <I>nm</I> 個(gè)獲取得子表達(dá)式，則 <I>nm</I> 為后向引用。如果 \<I>nm</I> 之前至少有 <I>n</I> 個(gè)獲取，則 <I>n</I> 為一個(gè)后跟文字 <I>m </I>的后向引用。如果前面的條件都不滿足，若&nbsp; <I>n</I> 和 <I>m</I> 均為八進(jìn)制數(shù)字 (0-7)，則 \<I>nm</I> 將匹配八進(jìn)制轉(zhuǎn)義值 <I>nm</I>。</TD> </TR> <TR VALIGN="top"> <TD width=16%>\<I>nml</I></TD> <TD width=84%>如果 <I>n</I> 為八進(jìn)制數(shù)字 (0-3)，且 <I>m</I> 和 <I>l</I> 均為八進(jìn)制數(shù)字 (0-7)，則匹配八進(jìn)制轉(zhuǎn)義值 <I>nml。</I></TD> </TR> <TR VALIGN="top"> <TD width=16%>\u<I>n</I></TD> <TD width=84%>匹配 <I>n</I>，其中 <I>n</I> 是一個(gè)用四個(gè)十六進(jìn)制數(shù)字表示的 Unicode 字符。例如， \u00A9 匹配版權(quán)符號(hào) (?)。</TD> </TR> </TABLE> </span> <span id="window3" style="display:none;color:blue;font-size:13px;"> <center><button class=bu style="width:300px;" onclick="sender();">以下內(nèi)容純屬個(gè)人所做，如有缺失，請(qǐng)幫忙指正！</button><input type=button class=bu style="width:300px;" onclick="document.getElementById('window3').style.display='none';document.getElementById('window2').style.display='inline';" value="正則說(shuō)明"></center> 例子1：.+ 詳解：這是最簡(jiǎn)單的一行全部匹配，也就是獲取的內(nèi)容是一整行的內(nèi)容！因?yàn)?."是除換行(\n)外的所有字符集，而"+"又代表至少一個(gè)的意思，合起來(lái)就是擁有至少一個(gè)除換行外的所有字符集，而行與行之間是以換行符（\r\n）進(jìn)行簡(jiǎn)隔的，所以這句正則代表了一行，由于換行符中包含了\r這個(gè)"."元字符所擁有的字符，所以就算行為空也是匹配的，如果換成[^\r\n]+的話就空行就不匹配了！<input type=button value="試驗(yàn)" class=bu onclick="set('第一行\(zhòng)n\n第三行','.+');"><p> 例子2：&lt;.+?&gt; 這個(gè)匹配HTML元素的正則，就是以<為開頭，中間含有至少一個(gè)非換行字符直到出現(xiàn)結(jié)束符>為止！正則里面的?是非貪婪模式，詳情請(qǐng)看正則說(shuō)明！也就是遇到第一個(gè)符合的匹配就停止搜索！如果沒加，就會(huì)一直搜索到最后一個(gè)>為止！<input type=button value="試驗(yàn)" class=bu onclick="set('<font>試驗(yàn)<\/font>','<.+?>');">如果沒加"?"，以貪婪模式進(jìn)行搜索結(jié)果：<input type=button value="試驗(yàn)" class=bu onclick="set('<font>試驗(yàn)<\/font>其它不相關(guān)內(nèi)容','<.+>');"><p> 例子3：&lt;tr.*?&gt;[\s\S]*?&lt;\/tr&gt; 這個(gè)正則匹配表格中的tr行！并且是跨換行進(jìn)行匹配！首先<tr.*?>是對(duì)tr開頭進(jìn)行匹配，因?yàn)橛行﹖r開頭有參數(shù)，所以加上.*?對(duì)參數(shù)部分進(jìn)行匹配，如果沒有參數(shù)，則.*?為空！[\s\S]是對(duì)包括換行符在內(nèi)的任務(wù)字符進(jìn)行匹配，因?yàn)閈s匹配空白字符，而\S又與它相反，兩個(gè)合在一個(gè)字符集合"[]"中就代表了所有的電腦字符！"*"代表0或無(wú)限個(gè)，合起來(lái)就是匹配所有字符串，"?"是非貪婪模式，也就是找到第一個(gè)<\/tr>之后就停止搜索，例子2有相關(guān)介紹<input type=button value="試驗(yàn)" class=bu onclick="set('<table>\n<tr>\n<td>相關(guān)內(nèi)容\n<\/td>\n<\/tr>\n\n<tr bgcolor=red><td>相關(guān)內(nèi)容<\/td><\/tr><table>','<tr.*?>[\\s\\S]*?<\\/tr>');"> </span> <span id=window1> <textarea style="font-size:13px;" name="a" rows="20" cols="120" class=tx1></textarea>  正則：<input type=text size=60 name="zhe" class=tx1><select onchange="zhe.value+=this.value;this.selectedIndex=0;"><option>常用字符</option><option value=".">除換行外任意字符</option><option value="[]">范圍內(nèi)的字符</option><option value="[^]">范圍外的字符</option><option value="?">非貪婪模式</option><option value="*">0或無(wú)限個(gè)</option><option value="+">至少一個(gè)</option><option value="{n}">含有n個(gè)</option><option value="{n,}">含有至少n個(gè)</option><option value="{n,m}">含有n至m個(gè)</option><option value="()">獲取子匹配</option><option value="(?:)">非獲取子匹配</option><option value="(?=)">正向預(yù)查</option><option value="(?!)">負(fù)向預(yù)查</option><option value="[\s\S]">換行在內(nèi)任意字符</option><option value="[a-z]">小寫字母</option><option value="[a-zA-Z]">大小寫字母</option><option value="[\u4e00-\u9fa5]">中文</option><option value="[ -~]">常用字符(單字節(jié))</option></select>替換：<input type=text size=60 name="ti" class=tx1><select onchange="if(this.selectedIndex!=10)ti.value+=this.value;else ti.value=this.value;this.selectedIndex=0;"><option>常用字符</option><option value="$1">子匹配1</option><option value="$2">子匹配2</option><option value="$3">子匹配3</option><option value="$4">子匹配4</option><option value="$5">子匹配5</option><option value="$6">子匹配6</option><option value="$7">子匹配7</option><option value="$8">子匹配8</option><option value="$9">子匹配9</option><option value="function(a){return a;}">函數(shù)</option></select> <input type=button value="查找" onclick="if(zhe.value!='')zhen(0)" class=bu><input type=button value="替換" onclick="if(zhe.value!='')zhen(1)" class=bu><input type=button value="生成" onclick="if(zhe.value!='')shen()" class=bu> <input type=button value="g" name=gg onclick="if(this.value=='g'){this.value='';}else{this.value='g';};l=gg.value+ii.value+mm.value;" style="width:25" class=bu> <input type=button value="i" name=ii onclick="if(this.value=='i'){this.value='';}else{this.value='i';};l=gg.value+ii.value+mm.value;" style="width:25" class=bu> <input type=button value="m" name=mm onclick="if(this.value=='m'){this.value='';}else{this.value='m';};l=gg.value+ii.value+mm.value;" style="width:25" class=bu> <input type=button value="不帶函數(shù)" onclick="this.value=(this.value=='不帶函數(shù)'?'帶函數(shù)':'不帶函數(shù)')" name=fun style="width:85" class=bu><input type=button value="顯示子匹配" onclick="this.value=(this.value=='隱藏子匹配'?'顯示子匹配':'隱藏子匹配')" name=zhip style="width:85" class=bu> <input type=button value="使用幫助" class=bu onclick="alert('左邊的gim三個(gè)按鈕為目前正則的參數(shù),默認(rèn)情況下三個(gè)參數(shù)都為true,點(diǎn)擊參數(shù)按鈕,按鈕變空則參數(shù)消除!另外兩個(gè)[不帶函數(shù)]和[顯示子匹配]為目前正則搜索設(shè)定,點(diǎn)擊可更換設(shè)定![生成]為快速生成正則表達(dá)式和字符串轉(zhuǎn)換代碼!');"> <input type=button value="正則幫助" onclick="window.showModelessDialog(location.href,document.all,'overflow:auto;dialogHeight:600px;dialogWidth:700px;');" style="color:red;" class=bu> 說(shuō)明:天藍(lán)色部分為主匹配,土色部分為子匹配! 表達(dá)式：<input type=text size=30 onFocus="this.select();" name=zz> <input type=text style="width:25px;" value="str" onFocus="this.select();" name=thename> <input type=text size=50 onFocus="this.select();" name=tiz> 限制匹配個(gè)數(shù):<input type=text name="num" value=0 class=tx1 onfocus="this.select();" title="0則不限" style="width:30px;">-->共有匹配:[ <font color=blue id="pi">0</font> ] 個(gè),子匹配 [ <font color=red id="zpi">0</font> ] 個(gè) <center id=b>搜索結(jié)果區(qū)域</center> </span> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

您可能感興趣的文章: