在網頁中使用Regular Expression搜尋

在網頁中使用Regular Expression搜尋

在網頁中使用Regular Expression搜尋

Chrome(或一般瀏覽器)內建的搜尋功能通常不能使用正規表示(Regular Expression,類似於Word的萬用字元)功能,這裡教各位怎麼解決。

在網頁加入下面的程式碼

<a href="javascript:(function(){var count=0, text, regexp;text=prompt(&quot;Search regexp:&quot;, &quot;&quot;);if(text==null || text.length==0)return;try{regexp=new RegExp(&quot;(&quot; + text +&quot;)&quot;, &quot;i&quot;);}catch(er){alert(&quot;Unable to create regular expression using text '&quot;+text+&quot;'.\n\n&quot;+er);return;}function searchWithinNode(node, re){var pos, skip, spannode, middlebit, endbit, middleclone;skip=0;if( node.nodeType==3 ){pos=node.data.search(re);if(pos&gt;=0){spannode=document.createElement(&quot;SPAN&quot;);spannode.innerHTML=&quot;[mark]&quot;;middlebit=node.splitText(pos);endbit=middlebit.splitText(RegExp.$1.length);middleclone=middlebit.cloneNode(true);spannode.appendChild(middleclone);middlebit.parentNode.replaceChild(spannode,middlebit);++count;skip=1;}}else if( node.nodeType==1 &amp;&amp; node.childNodes &amp;&amp; node.tagName.toUpperCase()!=&quot;SCRIPT&quot; &amp;&amp; node.tagName.toUpperCase!=&quot;STYLE&quot;){for (var child=0; child &lt; node.childNodes.length; ++child){child=child+searchWithinNode(node.childNodes[child], re);}}return skip;}window.status=&quot;Searching for &quot;+regexp+&quot;...&quot;;searchWithinNode(document.body, regexp);window.status=&quot;Found &quot;+count+&quot; match&quot;+(count==1?&quot;&quot;:&quot;es&quot;)+&quot; for &quot;+regexp+&quot;.&quot;;})();">Find RegExp</a>

網頁中就會有一個名叫Find RegExp的連結,點擊連結就會執行某段JavaScript程式碼,跳出一個搜尋框,這個搜尋支援正規表示。例如想要搜尋would be Ving這個句型,就搜尋would be \S*ing,其中\S表示空格以外的任意字元,*表示任意長度。這個搜尋並不會跳到搜尋到的結果,而是會將滿足搜尋條件的字串前面加上[mark]。然後你就可以用你瀏覽器內建的搜尋功能,搜尋[mark]這個字串,就可以找到需要的句子。

Find RegExp

這個JavaScript指令是從這裡學來的(highlight regexp),原本是將搜尋到的字串highlight,也就是程式碼中的指令spannode.style.backgroundColor="yellow";,但因為搜尋的文章太大,就算highlight之後還是不容易找到,所以我將其改為spannode.innerHTML="[mark]";,也就是將搜尋到的字串前面加上[mark]這個標記。

No comments:

Post a Comment