Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Поиск как в браузере. (https://javascript.ru/forum/misc/85023-poisk-kak-v-brauzere.html)

Сергей Ракипов 11.03.2023 09:30

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

Задача хочу повторить поиск такой же как в браузерах при нажатии ctrl F
То есть будет строка поиска на сайте (не нужно ни каких горячих клавиш) которая будет искать полностью на всей страницы текс, Начинаю поиск с первых трех символов совпадение, что бы ему было пофиг на регистр и там же подсвечивал найденные совпадение и были клавиши вверх вниз для перемещение к найденным совпадением, ну и показывал какое количество совпадений нашел виде количества числа То есть полностью как в любом браузере.

Я думаю что это возможно просто нужна подсказка что и как использовать.

Не прошу скрипта, хочу сам сделать. Просто накидайте как это сделать. Я попробую.

Aetae 11.03.2023 09:44

Простой способ: использовать window.find, что по сути является интерфейсом к тому же поиску браузера.
Сложный способ, если предыдущий не подходит - сложный, на неделю разработки и месяц отлова багов минимум, тут лучше какую-нибудь готовую либу использовать.

Сергей Ракипов 11.03.2023 09:49

Aetae,
То есть это не так просто как мне кажется и мне как новичку нужно выбрать задачу по проще?

рони 11.03.2023 11:28

Цитата:

Сообщение от Сергей Ракипов
Не прошу скрипта,

давно это было ...)))
поиск и подсветка слов в тексте

voraa 11.03.2023 11:38

Цитата:

Сообщение от Сергей Ракипов
Просто накидайте как это сделать.

С помощью NodeIterator (https://developer.mozilla.org/en-US/...I/NodeIterator) перебираем все текстовые узлы. В каждом узле ищем заданную строку. Если нашли делим этот узел, что бы выделить найденную часть текста с помощью методов интерфейса CharacterData (https://developer.mozilla.org/en-US/.../CharacterData)
Далее оборачиваем каждую найденную подстроку в span для ее подсветки Сохраняем массив этих элементов. Отмечаем текущий элемент классом. При перемещении по найденным просто переставляем класс текущего на нужный элемент.
Ну и сделать обратную операцию снятия подсветки. Вытащить из этих спанов текст, а сам span удалить.
Не так и сложно. Просто плотная работа с DOM.

voraa 11.03.2023 12:42

А вообще все сложнее. Там надо исключать невидимые текстовые узлы. У которых у родителей display: none, продумать, что делать с теми, у которых visibility:hidden, и которые скрыты из-за того, что у родителя overflow:hidden.

Aetae 12.03.2023 01:18

voraa, ...а также учитывать что искомое слово\фраза может быть разделена на несколько нод...


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