高亮顯示輸入中多個內容div中的文本

Question

我具有此搜索和突出顯示功能，在嘗試跨多個內容div進行搜索之前，該功能正常工作。 什么是獲得解決方案的最佳途徑，因為我不想為每個內容div復制功能。

我正在考慮可能對每個函數使用a ...？

先感謝您！

圖書館：

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