學習數組的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 function sendMsg() { 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”類名的元素，如果有的話，就把目標文本的內容賦值為最開始的值，再進行下一步操作；如果沒有的話，直接進行后面的操作。