當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
javascript 查找文本并高亮显示
生活随笔
收集整理的這篇文章主要介紹了
javascript 查找文本并高亮显示
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
今天簡(jiǎn)單滴寫(xiě)了一個(gè)demo,簡(jiǎn)單地查找目標(biāo)文本并且高亮顯示。其主要用到了全局匹配和替換的方法，即：RegExp和replace
在其中遇到的一個(gè)問(wèn)題是忘記了把改變了的html字符串重新寫(xiě)入到容器中，導(dǎo)致花費(fèi)的時(shí)間較多，總算解決了問(wèn)題。
下面貼出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)){//沒(méi)找到 alert(" can not find!");return;}else{//找到var prehtml = document.getElementById("pretime").innerHTML;//獲取目標(biāo)文本容器的HTML字符串var newinner = prehtml.replace(reg,'<span class="highlight">'+searchtext+'</span>')//處理HTML字符串，為目標(biāo)文本加上樣式，即替換對(duì)應(yīng)的HTML結(jié)構(gòu) document.getElementById("pretime").innerHTML = newinner;//把處理后的HTML字符串寫(xiě)回到容器中 }}window.onload = function(){document.getElementById("searchbtn").onclick = function(){var searchtext = document.getElementById("search").value.Trim();searchTarget(searchtext);} } </script> </body> </html>效果圖：（從上面的head節(jié)點(diǎn)可以看出這是一個(gè)手機(jī)頁(yè)面，但是里面的代碼同樣適用于PC端）
?
轉(zhuǎn)載于:https://www.cnblogs.com/joyho/articles/3510388.html
總結(jié)
以上是生活随笔為你收集整理的javascript 查找文本并高亮显示的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： vue使用Google Map
- 下一篇： 面试必问：读写一致性，你需要思考的问题