今天簡單滴寫了一個demo,簡單地查找目標文本並且高亮顯示。其主要用到了全局匹配和替換的方法，即：RegExp和replace
在其中遇到的一個問題是忘記了把改變了的html字符串重新寫入到容器中，導致花費的時間較多，總算解決了問題。
下面貼出demo代碼
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Cache-Control" content="no-cache" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no" /> <title></title> <style> .highlight{ background-color: yellow; } </style> </head> <body> <input id="search" type="search"> <input id="searchbtn" type="button" value="search"> <div id="pretime"> 西豐、五女山、雨格、離堆公園、迎賓路、五女山、雨格、離堆公園、迎賓路、西豐、五女山、雨格、離堆公園、迎賓路、五女山、雨格、離堆公園、迎賓路西豐、五女山、雨格、離堆公園、迎賓路、五女山、雨格、離堆公園、迎賓路西豐、五女山、雨格、離堆公園、迎賓路、五女山、雨格、離堆公園、迎賓路西豐、五女山、雨格、離堆公園、迎賓路、五女山、雨格、離堆公園、迎賓路西豐、五女山、雨格、離堆公園、迎賓路、五女山、雨格、離堆公園、迎賓路西豐、五女山、雨格、離堆公園、迎賓路、五女山、雨格、離堆公園、迎賓路 </div> <script> String.prototype.Trim = function() {//去空格 return this.replace(/\s/gi,"") } function searchTarget(searchtext){//查找處理 var reg = new RegExp(searchtext,"g"); var objtext = document.getElementById("pretime").innerHTML; var sCurText; if(!reg.test(objtext)){//沒找到 alert(" can not find!"); return; } else{//找到 var prehtml = document.getElementById("pretime").innerHTML;//獲取目標文本容器的HTML字符串 var newinner = prehtml.replace(reg,'<span class="highlight">'+searchtext+'</span>')//處理HTML字符串，為目標文本加上樣式，即替換對應的HTML結構 document.getElementById("pretime").innerHTML = newinner;//把處理后的HTML字符串寫回到容器中 } } window.onload = function(){ document.getElementById("searchbtn").onclick = function(){ var searchtext = document.getElementById("search").value.Trim(); searchTarget(searchtext); } } </script> </body> </html>
效果圖：（從上面的head節點可以看出這是一個手機頁面，但是里面的代碼同樣適用於PC端）
