Организация поиска по веб-странице на JavaScript (без jQuery)

[Stalker_RED]

Допустим, на странице есть такой фрагмент:
Lorem <i>ipsum<i> dolor sit amet, consectetur adipiscing elit.
И ваш скрипт не сможет найти слова Lorem ipsum, прсто потому, что там <i> встречается.

А если нужно это еще и подсветить, да так чтобы не сломались ссылки, формы, и прочий интерактив, то все превращается в довольно сложную задачу, которыую вы решили отсилы на троечку.

Но есть готовые штуки вроде markjs.io и аналогов.

[tuxi]

С целью расширения кругозора, посмотрите в сторону XPath. Что то типа

xpathResult = document.evaluate("//body//text()", document, null, XPathResult.ANY_TYPE, null);
//или  сразу
xpathResult = document.evaluate("//body//text()[contains(., 'blabla')]", document, null, XPathResult.ANY_TYPE, null);

должно дать выборку всех нужных текстовых нод. Я не уверен, что это работает сейчас на chromium семействе. Но это очень красивое решение. Потом с помощью того же XPath можно найти контейнер содержащий нужный текст и подсветить его.

[chelovekkakvse]

Друзья, вы меня конечно заминусите, но:

1. Прежде чем жать кнопу «Опубликовать» посмотри как выглядит текст — больше половины жирным шрифтом.
2. Тащить сюда говнокод и называть это «поисковые алгоритмы» оскорбительно для аудитории.
3. Где здесь HTML5? В тегах написано...
4. Зачем jQuery для этой задачи в принципе и почему эта либа тут упоминается для меня осталось загадкой.

eval(search))

Это… ну я даж не знаю… Автор, прочти..

[lleo_aha]

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

[Klenov_s]

А внутри тэгов script он хорошо ищет?

[n0wheremany]

А зачем искать что-то на странице через поисковую форму? ИМХО я ожидаю результат поиска по всему сайту.

[dagen]

Пару дней назад получил тестовое задание от компании на вакансию Front-end dev. Конечно же, задание состояло из нескольких пунктов. Но сейчас речь пойдет только об одном из них — организация поиска по странице.

На работу-то взяли?

[pepelsbey]

У вас беда с обработчиками событий, почему не повесить их динамически? Даже если вы вешаете их с помощью onclick, вы как будто бездумно скопировали их из другого примера со ссылками: javascript: … ; return false глупо писали в href ссылок 10 лет назад — чтобы кликалось, но не переходило по ссылке. Здесь кнопка и onclick, достаточно написать имя функции внутри. Ну и зачем это в форму оборачивать, у неё же нет экшена?

В общем, я бы вам рекомендовал сначала научиться писать JS, а потом писать статьи на Хабр. Вы делаете ошибки новичка: и выглядит грустно, и кто-то может поверить, что так надо писать.

[PavelBelyaev]

Что-то у вас пошло не так и с середины статьи, тег не закрылся и весь текст стал большим заголовком с вложенными тегами, сразу видно профессионала во фронтенде.



p.s. А на хабре есть спойлер в комментариях? Все кнопки пересмотрел, не вижу.

[vadim5june]

 result = pr.match(/>(.*?)</g);  //отсекаем все теги и получаем только текст

Не отсекаем все теги, а ищем между тегами ">" и "<" -неверный алгоритм.
В следствии этого не будут искаться текст в body до первого тега ">" и, как написали в первом комментарии текст на нескольких тегах.
Далее точка в регулярном выражении ищет любые символы кроме перевода строки
Поэтому она не найдет текст с переводом строки внутри
Вы это обнаружили и написали
P.S.: для корректной работы необходимо убрать переносы текста в html документе в тех местах, где есть обычный текст между тегами.