Как сделать так , чтобы при поиске слов считались не только маленькие буквы, но и большие

Question

Код ищет слова по буквам, но проблема в том, что он учитывает при поиске регистр букв. То есть, если в <pre> будет слово начинающиеся с маленькой буквы, а в поиске я буду искать такое же слово, но с большой буквы, то он его не найдёт.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <input id="search" type="text" placeholder="Type to filter">
  <pre id="pre-1">
    bar
    baz
    foo
    cidr
    </pre>
  <pre id="pre-2">
    lorem
    bar
    baz
    fo
    ipsum
    dolor
    sit
    met
    </pre>
  <script>
    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);
    });
  </script>
</body>

</html>

Помогите сделать так, что бы код искал слова, вне зависимости от регистра букв.

Answer 1

Просто приведите сравниваемые значения к одинаковому регистру. Например, к нижнему, с помощью toLowerCase():

let $search = document.getElementById("search"),
  values = {},
  listener = function(e) {
    for (let preId in values) {
      document.getElementById(preId).innerHTML =
        values[preId].filter(w => w.toLowerCase().startsWith(e.target.value.toLowerCase())).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);
});

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

БЛОГ НА HUSL

Как сделать так , чтобы при поиске слов считались не только маленькие буквы, но и большие

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