Как сделать поиск слов , при условии что все слова находятся в одном теге pre

Question

Существует такой код для поиска слов

function myFunction() {

  var input = document.getElementById('myInput'),
    filter = input.value.toUpperCase(),
    li = document.querySelectorAll("pre");

  for (i = 0; i < li.length; i++) {
    if (li[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="быстрый поиск">

Как сделать так , что бы можно было искать слова в одном теге pre (и в тоже время среди разных pre). То есть если например у меня будет так:

<pre>  
Банан
Арбуз
Юла
Валера
Яков
Туз 
</pre>

<pre>
Федя
Саня
Дима
</pre>

и я в поиске напишу Юла , то останется только это слово , без остальных в этом теге и других тегах pre

Answer 1

В своём комментарии я имел ввиду следующее:

let $search = document.getElementById("search"),
    values = {},
    listener = function( e ) {
      for( let preId in values ) {
        document.getElementById(preId).innerHTML =
          values[preId]
          .filter( w =>
            w.startsWith( e.target.value )
          )
          .join("\n");
      }
    };

document.querySelectorAll("pre").forEach( pre => {
  values[pre.id] = pre.innerHTML.split(/\s/g).filter( w => w );
});

[ 'keyup', 'change' ].forEach( eventType => {
  $search.addEventListener( eventType, listener, true );
});

pre, input {
  margin: 5px;
  padding: 5px;
  border: 1px dashed black;
  border-radius: 5px;
}

<input id="search" type="text" placeholder="Type to filter" />
<pre id="pre-1">
bar
baz
foo
</pre>
<pre id="pre-2">
lorem
bar
baz
foo
ipsum
dolor
sit
met
</pre>

БЛОГ НА HUSL

Как сделать поиск слов , при условии что все слова находятся в одном теге pre

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