функция поиска не выделяет несколько значений - PullRequest
Новая
       9

функция поиска не выделяет несколько значений

0 голосов
/ 27 августа 2018

Если я использую эту библиотеку (см. Ниже) для одного текстового блока, тогда она работает нормально, но мне нужно, чтобы она работала с несколькими текстовыми блоками в моем приложении. Я создал функцию, которая делает это, однако кажется, что она выделяет только первое слово, введенное в поисковый ввод, или только первый символ, когда для этого параметра [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>

1 Ответ

0 голосов
/ 28 августа 2018

Благодаря @jAndy.Нашел мой ответ здесь и удалил библиотеку: Подсветка поисковых слов, таких как Chrome, с помощью 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);
    });    
  });
});​​
...