Отметка найденных вхождений

148

15 сентября 2017, 22:30

Написал функцию поиска по каталогу, нужно сделать так что бы каждое совпадение в строке отмечалось например красным цветом. Понимаю, что нужно найти подстроку и заменить её на такую же, с обёрткой и классом например .selected-text, но не получается реализовать, подскажите, как можно решить эту проблему.

$(document).ready(function() { // живой поиск по каталогу
  var filter  = $('.filter__search');
  $(filter).keyup(function () {
    var filterText = $(this).val();
    if (filterText === '' || isNumeric(filterText) || filterText.length < 3) {
      $('.tree-block__item').hide();
    } else {
      $('.tree-block__item').each(function() {
        if ($(this).text().search(new RegExp(filterText, 'i')) < 0) {
          $(this).hide();
        } else {
          $(this).show();
        }
      });
    }
  });
  function isNumeric(n) { // проверка на число
    return !isNaN(parseFloat(n)) && isFinite(n);
  }
});

Answer 1

попробуйте так:

 $("p").each(function() {
    var $str = 'sit';
        var text = $(this).text();
        text = text.replace($str, "<span style='background-color:yellow'>"+$str+"</span>");
        $(this).html(text);
        });