jQuery关键词高亮显示代码-jquery案例-前端日记簿

首页 jquery案例正文

jQuery关键词高亮显示代码

2023-12-11 87

效果图：

在输入框中进行文字输入点击搜索时会将对应的文字进行一个高亮显示在进行下一次搜索之前会将上一次的高亮显示移除主要是通过正则的方式检索出对应的文字

然后将其替换处理

html：

当点击按钮时获取到input中的value值

预览：

接下来在创建一个对象在里面写入高亮时的颜色以及内容这里的内容可以绑定从input中获取的val

然后就是对输入的内容进行一个判断当获取到是一个空字符串· 返回false

如果不是则对该文本进行正则处理然后对p标签进行each循环获取到对应的文字使用 replace进行标签替换并给新建标签绑定我们提前设置好的高亮颜色

 if (dataop.oshuru == "") {
      return false;
    } else {
      var regExp = new RegExp("(" + dataop.oshuru.replace(/[(){}.+*?^$|\\\[\]]/g, "\\$&") + ")", "ig");
      $("p").each(function () {
        var _this = $(this);
        var html = _this.html();
        var newHtml = html.replace(regExp, '<span class="glnow" style="color:' + dataop.ocolor + '">' + dataop.oshuru + "</span>"); //将找到的关键字替换，加上highlight属性；
        _this.html(newHtml); //更新文章；
      });
    }

最后在我们每次进行搜索直接对p标签进行一次遍历找到标签中的glnow类对其进行遍历将对应的标签颜色移除

完整代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>关键词高亮显示</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      body {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      h1 {
        margin-bottom: 20px;
      }
      p {
        line-height: 25px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <h1>关键字高亮显示</h1>
      <p class="text">我是测试文字，测试高亮功能</p>
      <p class="text">我是测试文字，测试高亮功能，点击按钮测试吧</p>
      <p class="text">我是测试文字，测试高亮功能</p>
      <p class="text">我是测试文字，测试高亮功能，点击按钮测试吧</p>
      <p class="text">我是测试文字，测试高亮功能</p>
      <p class="text">我是测试文字，测试高亮功能，点击按钮测试吧</p>
      <input type="text" value="高亮" />
      <button class="btn">搜索</button>
    </div>
  </body>
</html>
<script src="./js/jquery.js"></script>
<script>
  $(".btn").click(function () {
    // 获取文字
    var text = $("input").val();
    console.log(text);
    // 配置搜索内容以及高亮颜色
    var dataop = {
      ocolor: "red",
      oshuru: text,
    };
    // 重置先前的样式
    $("p").each(function () //先遍历，清除上一次的样式
    {
      var _this = $(this);
      _this.find($(".glnow")).each(function () //找到所有highlight属性的元素；
      {
        $(this).css({ color: "" }); //将他们的属性去掉；
      });
    });
    if (dataop.oshuru == "") {
      return false;
    } else {
      var regExp = new RegExp("(" + dataop.oshuru.replace(/[(){}.+*?^$|\\\[\]]/g, "\\$&") + ")", "ig");
      $("p").each(function () {
        var _this = $(this);
        var html = _this.html();
        var newHtml = html.replace(regExp, '<span class="glnow" style="color:' + dataop.ocolor + '">' + dataop.oshuru + "</span>"); //将找到的关键字替换，加上highlight属性；
        _this.html(newHtml); //更新文章；
      });
    }
  });
</script>

标签：

发表评论：取消回复

原文链接：http://1.15.94.33/?id=246

=========================================

http://1.15.94.33/ 为 “前端日记簿” 唯一官方服务平台，请勿相信其他任何渠道。