从输入中突出显示多个内容 div 中的文本

Question

我有这个搜索和突出显示功能，在我尝试搜索多个内容 div 之前它工作正常。获得解决方案的最佳途径是什么，因为我不想为每个内容 div 复制该功能。

我在考虑可能为每个函数使用一个...？

提前谢谢你！

图书馆：

/**
 * 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);

Javascript：

//highlight search terms in content
var searchCnt = 0;

var option = {
  color: "black",
  background: "lightskyblue",
  bold: false,
  class: "high",
  ignoreCase: true,
  wholeWord: false
};

var textContent = $(".searchtext")
  .html();
// searchCnt = $(".searchtext-One").highlight($("#searchInput").val(), option);
// $("#matcheCnt").text(searchCnt);

$("#searchInput").keyup(function() {
  $(".searchtext")
    .html(textContent);
  $("#searchInput").val(this.value);
  if (this.value == "") return;
  searchCnt = $(".searchtext")
    .highlight(this.value, option);
  $("#matcheCnt").text(searchCnt);
});

HTML：

<div class="inner-content">
  <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 border-top">
      <h4 class="off-white bold searchtabsheading">Technical Overview </h4>
      <!-- inject overview -->
      <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>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 border-top">
      <h4 class="off-white bold searchtabsheading">Potential Impact if exploited</h4>
      <!-- inject potential impact(s) -->
      <p class="searchtext">blah blah blah blah</p>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 border-top">
      <h4 class="off-white bold searchtabsheading">Recommendations</h4>
      <!-- inject recommendation(s) -->
      <p class="searchtext">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>
    </div>
  </div>
</div>

Answer 1

这是我发现可以工作的脚本：

// highlight search terms in content
var searchCnt = 0;

var option = {
  color: "black",
  background: "lightskyblue",
  bold: false,
  ignoreCase: true
  wholeWord: true
};

$("#searchInput").keyup(function() {
  var searchVal = $(this).val();
  if (!searchVal || searchVal === "") {
    return;
  } else {
    $(".searchtext").each(function() {
      $(this).highlight(searchVal, option);
    });
  }
});