学习数组的indexOf()方法的时候，因为它也适用于字符串，所以想到了的这个功能，就自己试了试。
1 <html> 2 <head> 3 <title></title> 4 <style> 5 .showBox { 6 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”类名的元素，如果有的话，就把目标文本的内容赋值为最开始的值，再进行下一步操作；如果没有的话，直接进行后面的操作。