Поиск совпадения текста в html элементах jquery

Question

Подскажите пожалуйста, как я могу скрыть элементы div содержимое которых не совпадает содержимому input. Если содержимое div="Один" а содержимое input="од" то div не скрывается.

Попытка:

$("#search_text").keyup(function(e) {
  var text = $("#search_text").val();
  if ($(".search_block div").text() != text) {
    $(this).hide;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="search_text">
<div class="search_block">
  <div>Один</div>
  <div>Два</div>
  <div>Три</div>
  <div>Четыре</div>
  <div>Пять</div>
</div>

Answer 1

Коротко и понятно. Макияж по своему усмотрению:

$("#search_text").on('input', function() {
  let text = $("#search_text").val();
  $(".search_block > div").each(function() {
    if ($(this).text().search(new RegExp(`${text}`, 'i')) < 0 && text != '') {
      $(this).hide("slow");
    } else {
      $(this).show("slow");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="search_text">
<div class="search_block">
  <div>Один</div>
  <div>Два</div>
  <div>Три</div>
  <div>Четыре</div>
  <div>Пять</div>
</div>

Answer 2

Поиск по regexp лучше не использовать в данной задачи, т.к. будут проблемы со спец символами, например () . [] * и т.д.

Можно, конечно, их экранировать, но это лишняя работа, которая не принесет пользы.

Попробуйте поискать по символу [ в данном примере.

$("#search_text").on('input', function() {
  let text = $("#search_text").val();
  $(".search_block > div").each(function() {
    if ($(this).text().search(new RegExp(`${text}`, 'i')) < 0 && text != '') {
      $(this).hide("slow");
    } else {
      $(this).show("slow");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="search_text">
<div class="search_block">
  <div>Один</div>
  <div>Два</div>
  <div>Три</div>
  <div>Четыре</div>
  <div>Пять</div>
  <div>Шесть[]</div>
</div>

Поиск лучше сделать через indexOf.

Он работает быстрее и для данной задачи вполне достаточен.

$("#search_text").on('input', function() {
  let text = $("#search_text").val().toLowerCase();
  $(".search_block > div").each(function() {
    const $this = $(this);
    if ($this.text().toLowerCase().indexOf(text) === -1) {
      $this.hide("slow");
    } else {
      $this.show("slow");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="search_text">
<div class="search_block">
  <div>Один</div>
  <div>Два</div>
  <div>Три</div>
  <div>Четыре</div>
  <div>Пять</div>
  <div>Шесть[]</div>
</div>

И напоследок, небольшое сравнение производительности Regexp и indexOf.

const array = new Array(1000000).fill(1)

console.time('regexp');
const searchRegexp = new RegExp(`${'1'}`, 'i');
array.forEach(f => {
  const result = ('hello' + f).search(searchRegexp);
});
console.timeEnd('regexp');


console.time('indexof');
const searchStr = '1';
array.forEach(f => {
  const result = ('hello' + f).toLowerCase().indexOf(searchStr) === -1;
});
console.timeEnd('indexof');

БЛОГ НА HUSL

Поиск совпадения текста в html элементах jquery

Ответы (2 шт):