js—查找指定字符串并高亮显示

学习数组的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标签代替，标签里面的内容就是需要查找的字符串：
1. 使用字符串的split()方法，先把目标字符串以需要查找的字符串作为分隔转换成数组；
2. 再用数组的join()方法，以 <span class='text'>需要查找的字符串</span> 作为分隔，把上面的数组连接成字符串;
3. 给带有这个类名的span设置背景颜色达到高亮效果；
  有一点需要注意，当第一次查询操作结束后，我们要把上一次查询做的操作给清除掉，我的方法是：
4. 在点击按钮的最开始，就先获取一下页面中是否有带“text”类名的元素，如果有的话，就把目标文本的内容赋值为最开始的值，再进行下一步操作；如果没有的话，直接进行后面的操作。