搜索功能不突出显示多个值

Question

如果我将这个库（见下文）用于一个文本块，那么它可以正常工作，但我需要它在我的整个应用程序中处理多个文本块。我创建了一个执行此操作的函数，但是当此选项 [wholeWord: true] 设置为 false 时，它似乎只突出显示输入搜索输入的第一个单词或仅突出显示第一个字符（尽管它记录了输入到安慰）。我如何编辑我的函数以启用全部功能（突出显示所有输入的数据）？提前谢谢你。

图书馆：

/**
 * highlight 1.0.0
 * Licensed under MIT
 *
 * Copyright (c) 2016 yjteam
 * http://yjteam.co.kr
 *
 * GitHub Repositories
 * https://github.com/yjseo29/highlight.js
 */

if (typeof jQuery === "undefined") {
  throw new Error("JavaScript requires jQuery");
}

+(function($) {
  "use strict";
  var version = $.fn.jquery.split(" ")[0].split(".");
  if (
    (version[0] < 2 && version[1] < 9) ||
    (version[0] == 1 && version[1] == 9 && version[2] < 1)
  ) {
    throw new Error("JavaScript requires jQuery version 1.9.1 or higher");
  }
})(jQuery);

+(function($) {
  $.fn.highlight = function(word, options) {
    var option = $.extend(
      {
        background: "#ffff00",
        color: "#000",
        bold: false,
        class: "",
        ignoreCase: true,
        wholeWord: true
      },
      options
    );
    var findCnt = 0;

    if (this.length == 0) {
      throw new Error("Node was not found");
    }

    var $el = $('<span style="color:' + option.color + ';"></span>');
    if (option.bold) {
      $el.css("font-weight", "bold");
    }
    if (option.background != "") {
      $el.css("background", option.background);
    }
    if (option.class != "") {
      $el.addClass(option.class);
    }

    if (option.wholeWord) {
      word = "\b" + escapeRegExp(word) + "\b";
    }
    var re = new RegExp(word, option.ignoreCase == true ? "gi" : "g");

    this.each(function() {
      var content = $(this).html();

      $(this).html(
        content.replace(re, function(t) {
          findCnt++;
          $el.text(t);
          return $el.get(0).outerHTML;
        })
      );
    });
    return findCnt;

    function escapeRegExp(string) {
      return string.replace(/([.*+?^=!:${}()|\[\]\/\])/g, "\");
    }
  };
})(jQuery);

Main.js

// highlight search terms in content
$("#searchInput").on("keyup change", function() {
  var option = {
    color: "#353535",
    background: "#fff",
    bold: false,
    ignoreCase: true,
    wholeWord: true
  };
  var searchVal = $("#searchInput").val();

  // console.log("value", searchVal);
  if (!searchVal || searchVal === "") {
    // console.log("no value", searchVal);
    // $("span").removeAttr("style");
    $(".searchtext").each(function() {
      $(this)
        .find("span")
        .contents()
        .unwrap();
      return;
    });
  } else {
    console.log("value", searchVal);
    $(".searchtext").each(function() {
      $(this).highlight(searchVal, option);
    });
  }
});

HTML: 输入：

<input id="searchInput" onkeyup="search()" class="search-box" type="text" placeholder="Search"><i type="reset" class="fas fa-search"></i></input>

文本块 1：

<p class="searchtext">first Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

文本块二

<p class="searchtext">second Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Answer 1

感谢@jAndy。在这里找到我的答案并报废图书馆：Highlighting search words like Chrome with jQuery

代码：

    $(document).ready(function(){
    var search = ['p', 'div', 'span'];

    $("#highlighter").bind('keyup', function(e){
    var pattern = $(this).val();

    $.each(search, function(i){
        var str = this[0];        
        var orgText = $(str).text();

        orgText = orgText.replace(pattern, function(){
          return "<span style='background-color: red;'>" +  + "</span>"
        });

        $(str).html(orgText);
    });    
  });
});

搜索功能不突出显示多个值

search function doesn't highlight multiple values

javascript

search

jquery

highlight