當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

javascript 查找文本并高亮显示

發布時間：2024/9/5 javascript 49 豆豆

生活随笔收集整理的這篇文章主要介紹了 javascript 查找文本并高亮显示小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

今天簡單滴寫了一個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端）

轉載于:https://www.cnblogs.com/joyho/articles/3510388.html

總結

以上是生活随笔為你收集整理的javascript 查找文本并高亮显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。