利用Javascript的getSelection()搜尋頁面裡的字串，再用document.execCommand()標注出來，就可以完成一個簡易的頁面搜尋功能了。


HTML部份：

輸入關鍵字查詢
<input type="text" size=8 id="search">
<input type="button" id="button" onclick="doSearch($('#search').val())" value="查詢">
<p>自從RWD開始被推展之後，大家都一窩蜂什麼都要做成RWD</p>
<p>這一篇就先來說說缺點吧~</p>
<ul>
<li><span style="color: #ff6600;">所有的載具都讀取同⼀份網⾴，⼿機或平板效能⽐較差的載具，會有讀取速度較慢的問題</span></li>
</ul>
<p>RWD網頁最大的優點就是不管在什麼載具，都是讀取同一份html檔，但也就是因為這樣，不同的載具效能不同，就會呈現不同的效果，如果網頁是需要很多特效的話，那就只能盼望使用者的載具(手機、平板)都可以有像電腦一樣的硬體等級了。</p>
<ul>
<li><span style="color: #ff6600;">內容影響整體閱讀，不適合過於複雜的排版與內容</span></li>
</ul>
<p>RWD網頁在設計時通常還是會針對手機版做比較特比的規劃，畢竟手機的螢幕大小有限，比較不適合把所有東西都塞在一個頁面裡呈現。</p>
<ul>
<li><span style="color: #ff6600;">舊瀏覽器⽀援度⽐較差 (ex : IE7 IE8 IE9)</span></li>
</ul>
<p>只能說IE真是所有網頁開發人員的痛阿…真希望它趕快跟上腳步，或乾脆放棄了吧~</p>
<ul>
<li><span style="color: #ff6600;">開發時間與成本比傳統方式多</span></li>
</ul>
<p>RWD網頁是在後續維護比較省時間(因為只要更新一份html)，但開發可就不是這麼一回事，在製作過程需要一直比對各載具的相容性(版面、效能)，所以開發時間可不是兩個平台就兩倍時間這麼簡單的事情。</p>

Javascript部份：

function doSearch(text) {
	var isfound=0;
    if (window.find && window.getSelection) {
        document.designMode = "on";
        var sel = window.getSelection();
		sel.collapseToEnd();
		isfound=0;
        while (window.find(text)) {
            $("#button").blur();
            document.execCommand("HiliteColor", false, "aquamarine");
            sel.collapseToEnd();
			isfound=1;
        }
 		if (isfound == 0) {
			alert('cant find');
		}
       document.designMode = "off";
    }
}

以下結果預覽