js—查指定字符串并⾼亮显⽰
学习数组的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>
26var originalText = ElementsByClassName('showBox')[0].innerText;
27function sendMsg() {
28var text = originalText;
29var history = ElementsByClassName('text');
30if (history.length > 0) {
31                text = originalText;
32            }
33var inputValue = ElementsByClassName('inputEl')[0].value;
34var found = findAll(text, inputValue);
35for (var i = 0; i < text.length; i++) {
36for (var j in found) {
37if (i == found[j]) {
38                        text = originalText.split(inputValue).join(`<span class="text">${inputValue}</span>`);
3940                    }
41                }
42            }
43            ElementsByClassName('showBox')[0].innerHTML = text;
44            ElementsByClassName('inputEl')[0].value = "";
字符串转数组方法js45        }
46function findAll(str, x) {
47var results = [];
48var len = str.length;
49var pos = 0;
50while (pos < len) {
51                pos = str.indexOf(x, pos);
52if (pos === -1)
53break;
54                results.push(pos);
55                pos = pos + 1;
56            }
57return results;
58        }
59    </script>
60 </html>
  主要的思路就是：
1.  　通过遍历⽬标字符串，使⽤indexOf()⽅法返回需要查的字符串的下标，把这些下标依次push到⼀个单独的数组中，作为函数的返回值返回；
2. 点击“查”按钮，再次遍历⽬标字符串，把刚刚返回的数组⾥的下标处的字符串⽤带类名的span标签代替，标签⾥⾯的内容就是需要查的字符串：
1. 使⽤字符串的split()⽅法，先把⽬标字符串以需要查的字符串作为分隔转换成数组；
2. 再⽤数组的join()⽅法，以 <span class='text'>需要查的字符串</span> 作为分隔，把上⾯的数组连接成字符串;
3. 给带有这个类名的span设置背景颜⾊达到⾼亮效果；
有⼀点需要注意，当第⼀次查询操作结束后，我们要把上⼀次查询做的操作给清除掉，我的⽅法是：
4. 在点击按钮的最开始，就先获取⼀下页⾯中是否有带“text”类名的元素，如果有的话，就把⽬标⽂本的内容赋值为最开始的值，再进⾏下⼀步操作；
如果没有的话，直接进⾏后⾯的操作。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。