Как подсветить элементы, содержащие заданную подстроку, игнорируя регистр?

Question

[Тимофей Михайлов]

Мне нужно делать поиск по классу intro, примерчик я набросал тут:


В принципе, код работает, но.
Я не могу сделать так, чтобы код игнорировал регистр.
В примере он должен подсветить две последние строчки.

Answer 1

[0xD34F]

О каких элементах идёт речь: const className = 'intro';.

Можно приводить текст элемента и строку, по которой выполняется поиск, к общему регистру:

function setHighlight(value) {
  value = value.toLowerCase();

  for (const n of document.getElementsByClassName(className)) {
    const matched = value && n.innerText.toLowerCase().includes(value);
    n.style.backgroundColor = matched ? 'silver' : '';
  }
}

Или, воспользоваться регулярным выражением, нечувствительным к регистру:

.highlight {
  background-color: silver;
}

function setHighlight(value) {
  let test = () => false;
  if (value) {
    try {
      test = RegExp.prototype.test.bind(RegExp(value, 'i'));
    } catch (e) {}
  }

  document.querySelectorAll(`.${className}`).forEach(n => {
    n.classList.toggle('highlight', test(n.textContent));
  });
}

Comments

[Тимофей Михайлов]

спасибо!

Answer 2

[coderisimo]

Прошу прощения, что использую "устаревший" jQuery ))))).
Всего одна "устаревшая" строчка решает задачу.

$('.intro').each(function(e){
   /friend/i.test($(this).html()) && $(this).css('background-color', 'silver');
 });

Comments

[Тимофей Михайлов]

спасибо!