js—查詢指定字串並高亮顯示
阿新 • • 發佈：2020-12-21
學習陣列的indexOf()方法的時候，因為它也適用於字串，所以想到了的這個功能，就自己試了試。
1 <html> 2 <head> 3 <title></title> 4 <style> 5 .showBox { 6 width: 400px; 7 min-height: 100px; 8 padding: 10px; 9 border: 1px solid #000;10 } 11 12 .text { 13 background: orange; 14 } 15 </style> 16 </head> 17 <div class="showBox">唧唧復唧唧，木蘭當戶織。不聞機杼聲，唯聞女嘆息。 18 問女何所思，問女何所憶。女亦無所思，女亦無所憶。昨夜見軍帖，可汗大點兵，軍書十二卷，卷卷有爺名。阿爺無大兒，木蘭無長兄，願為市鞍馬，從此替爺徵。 19 東市買駿馬，西市買鞍韉，南市買轡頭，北市買長鞭。旦辭爺孃去，暮宿黃河邊，不聞爺孃喚女聲，但聞黃河流水鳴濺濺。旦辭黃河去，暮至黑山頭，不聞爺孃喚女聲，但聞燕山胡騎鳴啾啾。20 </div> 21 <p> 22 <input placeholder="請輸入關鍵字" class="inputEl"/> 23 <button onclick="sendMsg()">查詢</button> 24 </p> 25 <script> 26 var originalText = document.getElementsByClassName('showBox')[0].innerText; 27 functionsendMsg() { 28 var text = originalText; 29 var history = document.getElementsByClassName('text'); 30 if (history.length > 0) { 31 text = originalText; 32 } 33 var inputValue = document.getElementsByClassName('inputEl')[0].value; 34 var found = findAll(text, inputValue); 35 for (var i = 0; i < text.length; i++) { 36 for (var j in found) { 37 if (i == found[j]) { 38 text = originalText.split(inputValue).join(`<span class="text">${inputValue}</span>`); 39 40 } 41 } 42 } 43 document.getElementsByClassName('showBox')[0].innerHTML = text; 44 document.getElementsByClassName('inputEl')[0].value = ""; 45 } 46 function findAll(str, x) { 47 var results = []; 48 var len = str.length; 49 var pos = 0; 50 while (pos < len) { 51 pos = str.indexOf(x, pos); 52 if (pos === -1) 53 break; 54 results.push(pos); 55 pos = pos + 1; 56 } 57 return results; 58 } 59 </script> 60 </html>
主要的思路就是：
- 通過遍歷目標字串，使用indexOf()方法返回找需要查詢的字串的下標，把這些下標依次push到一個單獨的陣列中，作為函式的返回值返回；
- 點選“查詢”按鈕，再次遍歷目標字串，把剛剛返回的數組裡的下標處的字串用帶類名的span標籤代替，標籤裡面的內容就是需要查詢的字串：
- 使用字串的split()方法，先把目標字串以 需要查詢的字串 作為分隔 轉換成陣列；
- 再用陣列的join()方法，以<span class='text'>需要查詢的字串</span> 作為分隔 ，把上面的陣列連線成字串;
- 給帶有這個類名的span設定背景顏色達到高亮效果；
有一點需要注意，當第一次查詢操作結束後，我們要把上一次查詢做的操作給清除掉，我的方法是： - 在點選按鈕的最開始，就先獲取一下頁面中是否有帶“text”類名的元素，如果有的話，就把目標文字的內容賦值為最開始的值，再進行下一步操作；如果沒有的話，直接進行後面的操作。