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

高亮显示来自输入的多个内容div中的文本

1 个答案: