js 搜尋關鍵字，文章中關鍵字高亮顯示
阿新 • • 發佈：2019-01-04
實現程式碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> .highlight{background:green;font-weight:bold;color:white;} </style> </head> <body> <p><input id="input"/><button onclick="highlight()">搜尋</button></p> <div id="div"> <p>搜尋，文章關鍵字高亮顯示aaa</p> <p>搜尋，文章關鍵字高亮顯示bbb</p> <p>搜尋，文章關鍵字高亮顯示ccc</p> <p>搜尋，文章關鍵字高亮顯示ddd</p> <p>搜尋，文章關鍵字高亮顯示eee</p> <p>搜尋，文章關鍵字高亮顯示fff</p> <p>搜尋，文章關鍵字高亮顯示hhh</p> </div> </body> <script type="text/javascript"> function encode(s){ return s.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/([\\\.\*\[\]\(\)\$\^])/g,"\\$1"); } function decode(s){ return s.replace(/\\([\\\.\*\[\]\(\)\$\^])/g,"$1").replace(/>/g,">").replace(/</g,"<").replace(/&/g,"&"); } function highlight(s){ var s=document.getElementById("input").value; console.log(s); if (s.length==0){ alert('搜尋關鍵詞未填寫！'); return false; } s=encode(s); var obj=document.getElementById("div"); var t=obj.innerHTML.replace(/<span\s+class=.?highlight.?>([^<>]*)<\/span>/gi,"$1"); obj.innerHTML=t; var cnt=loopSearch(s,obj); t=obj.innerHTML console.log(t); var r=/{searchHL}(({(?!\/searchHL})|[^{])*){\/searchHL}/g t=t.replace(r,"<span class='highlight'>$1</span>"); obj.innerHTML=t; } function loopSearch(s,obj){ var cnt=0; if (obj.nodeType==3){ cnt=replace(s,obj); return cnt; } for (var i=0,c;c=obj.childNodes[i];i++){ if (!c.className||c.className!="highlight") cnt+=loopSearch(s,c); } return cnt; } function replace(s,dest){ var r=new RegExp(s,"g"); var tm=null; var t=dest.nodeValue; var cnt=0; if (tm=t.match(r)){ cnt=tm.length; t=t.replace(r,"{searchHL}"+decode(s)+"{/searchHL}") dest.nodeValue=t; } return cnt;} </script> </html>