• 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>

      主要的思路就是:

    1.   通过遍历目标字符串,使用indexOf()方法返回找需要查找的字符串的下标,把这些下标依次push到一个单独的数组中,作为函数的返回值返回;
    2. 点击“查找”按钮,再次遍历目标字符串,把刚刚返回的数组里的下标处的字符串用带类名的span标签代替,标签里面的内容就是需要查找的字符串:
      1. 使用字符串的split()方法,先把目标字符串以 需要查找的字符串 作为分隔 转换成数组;
      2. 再用数组的join()方法,以 <span class='text'>需要查找的字符串</span> 作为分隔 ,把上面的数组连接成字符串;
      3. 给带有这个类名的span设置背景颜色达到高亮效果;
        有一点需要注意,当第一次查询操作结束后,我们要把上一次查询做的操作给清除掉,我的方法是:
      4. 在点击按钮的最开始,就先获取一下页面中是否有带“text”类名的元素,如果有的话,就把目标文本的内容赋值为最开始的值,再进行下一步操作;如果没有的话,直接进行后面的操作。
  • 相关阅读:
    zabbix3.4报警队列过多清理
    k8s安装nexus并导入第三方jar包
    kubeadmin安装最新版本的kubenets
    aws相关知识
    mysql忘记root密码做法
    mysql实现读写分离(proxy)与高可用(MGR)
    jvm调优
    zabbix监控php-fpm的性能
    脚本
    opencv demo
  • 原文地址:https://www.cnblogs.com/lindang/p/14168286.html
Copyright © 2020-2023  润新知