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, "\\$1");
    }
  };
})(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($1){
          return "<span style='background-color: red;'>" + $1 + "</span>"
        });

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

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

1 个答案: