toLowerCase не правильно работает в поиске

Question

Даже не знаю как описать свою проблему , постараюсь максимально подробно. Мне нужно было сделать , чтобы поиск не обращал внимание на размер буквы при поиске слов , я добавил toLowerCase , но всё работает вообще не так как должно. Например ,ввожу "п" или "П" видно только слово с маленькой буквы , ввожу "в" или "В" , вроде правильно показывает все слова и с большой и с маленькой буквы, начинаю вводить "вт" всё , видно только слово с маленькой буквы, на английском ввожу "anana" всё правильно работает , показывает и с маленькой и с большой , как мне и нужно , а слово "BOM" вообще не видит , не с маленькой , не с большой и не пойму как это исправить

const $search = document.getElementById("search");
const preElements = document.querySelectorAll("pre");


const initialContents = {};
preElements.forEach(function(pre) {
  initialContents[pre.id] = pre.textContent;
});


function filterPreElements(searchText) {
  preElements.forEach(function(pre) {
    const lines = initialContents[pre.id].split("\n");
    const filteredLines = lines.filter(function(line) {
      return line.includes(searchText.toLowerCase());
    });
    pre.textContent = filteredLines.join("\n");
  });
}

$search.addEventListener("input", function(e) {
  const searchText = e.target.value.trim();
  filterPreElements(searchText);
});

<input id="search" type="text" placeholder="Type to filter" />

<pre id="pre-1">
первое слово
Первое слово
Второе слово 
второе слова
</pre>


<pre id="pre-2">
Ananana
ananana
albert
BOM
</pre>

Answer 1

Проблема, описанная Вами, связана с тем, что вы приводите текст к нижнему регистру только при сравнении со строкой searchText, но оставляете исходный текст в pre без изменений. Это приводит к тому, что поиск осуществляется только с учетом регистра в searchText, но отображение остается неизменным.

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>For – Stanislav Volodarskiy </title>
</head>

<body>
    <input id="search" type="text" placeholder="Type to filter" />

    <pre id="pre-1">
        первое слово
        Первое слово
        Второе слово 
        второе слова
    </pre>

    <pre id="pre-2">
        Ananana
        ananana
        albert
        BOM
    </pre>

    <script>
        const $search = document.getElementById("search");
        const preElements = document.querySelectorAll("pre");

        const initialContents = {};
        preElements.forEach(function (pre) {
            initialContents[pre.id] = pre.textContent;
        });

        function filterPreElements(searchText) {
            preElements.forEach(function (pre) {
                const lines = initialContents[pre.id].split("\n");
                const filteredLines = lines.filter(function (line) {
                    return line.toLowerCase().includes(searchText.toLowerCase());
                });
                pre.textContent = filteredLines.join("\n");
            });
        }

        $search.addEventListener("input", function (e) {
            const searchText = e.target.value.trim();
            filterPreElements(searchText);
        });
    </script>
</body>

</html>

БЛОГ НА HUSL

toLowerCase не правильно работает в поиске

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