Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как выделить искомый запрос в результатах поиска (https://javascript.ru/forum/dom-window/85481-kak-vydelit-iskomyjj-zapros-v-rezultatakh-poiska.html)

WebMachine 16.09.2023 23:19

Как выделить искомый запрос в результатах поиска
 
Здравствуйте.
Хочу выделить искомый запрос в результатах поиска жирным шрифтом.
На данный момент написал:
<script>
document.addEventListener("DOMContentLoaded", () => {
   let searchinput = document.querySelector('#searchinput').value;
   let fullpage = document.querySelector('#fullpage').toString();
   // fullpage.replace(searchinput, '<b>'+searchinput+'</b>');
   fullpage.split(searchinput).join('<b>'+searchinput+'</b>');
});
</script>


Подскажите что я делаю не так? В консоли ошибок нет.
Почему запрос в найденных результатах не выделяется?

рони 17.09.2023 01:11

Цитата:

Сообщение от WebMachine
Почему запрос в найденных результатах не выделяется?

где строка которая выводит результат?

WebMachine 17.09.2023 01:16

Цитата:

Сообщение от рони (Сообщение 553254)
где строка которая выводит результат?

не понял вопроса

WebMachine 17.09.2023 01:20

Цитата:

Сообщение от рони (Сообщение 553254)
где строка которая выводит результат?

Надо чтобы код подсвечивал найденный из input value текст, везде где только увидит его в результатах поиска

WebMachine 17.09.2023 01:26

Цитата:

Сообщение от рони (Сообщение 553254)
где строка которая выводит результат?

HELP

рони 17.09.2023 02:58

WebMachine,
не могу помочь, но я говорил про что-то такое
out.innerHTML =  fullpage.replace(searchinput, '<b>'+searchinput+'</b>');

WebMachine 17.09.2023 03:02

Цитата:

Сообщение от рони (Сообщение 553258)
WebMachine,
не могу помочь, но я говорил про что-то такое
out.innerHTML =  fullpage.replace(searchinput, '<b>'+searchinput+'</b>');

Блин я не думаю что это на столько сложно. Надо просто подсвечивать введённое в input значение в тексте.

WebMachine 17.09.2023 03:21

Цитата:

Сообщение от рони (Сообщение 553258)
WebMachine,
не могу помочь, но я говорил про что-то такое
out.innerHTML =  fullpage.replace(searchinput, '<b>'+searchinput+'</b>');

Нашел решение но оно подсвечивает только первое найденное совпадение:
document.addEventListener("DOMContentLoaded", () => {
    let searchinput = document.querySelector('#searchinput').value;
    let newValue = '<b>' +searchinput+ '</b>';
    const elements = document.querySelectorAll('p.fullpage');
    elements.forEach((element) => {
        element.innerHTML = element.textContent.replace(searchinput, newValue);
    });
});

voraa 17.09.2023 10:01

Цитата:

Сообщение от WebMachine
element.innerHTML = element.textContent.replace(searchinput, newValue);

Используйте replaceAll вместо replace.

WebMachine 17.09.2023 12:17

Цитата:

Сообщение от voraa (Сообщение 553265)
Используйте replaceAll вместо replace.

Спасибо, а можете подсказать как объединить это:
document.addEventListener("DOMContentLoaded", () => {
    let searchinput = document.querySelector('#searchinput').value;
    let newValue = '<b>' +searchinput+ '</b>';
    const elements = document.querySelectorAll('.fulldesc');
    elements.forEach((element) => {
        element.innerHTML = element.textContent.replaceAll(searchinput, newValue);
    });
});

с этим: https://javascript.ru/forum/dom-wind...zav-konec.html


Часовой пояс GMT +3, время: 02:58.