Как сделать навигацию по найденному слову внутри страницы?

Question

[Алексей Вихрев]

Добрый день.
Поможете решить задачу или подсказать направление, как сделать. В сайте по странице настроен поиск внутри блока с классом "content". В строку поиска пишем текст "Привет", и если на странице есть слово "Привет", оно помещается в привет. Таких элементов на странице может быть много. Хочу сделать кнопки следующий, предыдущий результат. Которые будут переходить между результатами по странице. Да вот только понять не могу, как это сделать. Можете помочь в решении задачи?

Comments

[Danny Arty]

При вводе текста в строку. Все соответствующие, введенному в строку поиска тексту, элементы помещаются в слово, которое введено в строку поиска.

Непонятное предложение. Можете объяснить?

[Алексей Вихрев]

Danny Arty, попробую иначе. В строку поиска пишем текст "Привет", и если на странице есть слово "Привет", оно выделяется зеленым цветом.

[v3shin]

Это как ctrl+F, но на js?

[Александр Цымбал]

Короче, насколько я понял, нужно как браузерный поиск по странице (Ctrl+F).
Логика следующая:
1. При вводе в поле поиска символов производится поиск комбинации этих символов по тексту и их подсветка (обёртка в span какой-нибудь)
2. Первое из совпадений приобретает какой-нибудь дополнительный класс или data-атрибут, означающий, что данный элемент актуален.

3. Пишем функции, срабатывающие при событиях (нажатия на кнопки), в которых:
3.1. ищется актуальное на текущий момент совпадение (по этому самому дополнительному классу или data-атрибуту).
3.2. ищется следующее/предыдущее от актуального совпадение.
3.3. находятся координаты найденного совпадения.
3.4. страница прокручивается до совпадения по координатам.
3.5. у текущего совпадения класс актуальности снимается и назначается найденному.

Там кода строк на 30-40 максимум. Логику разжевал.

[Алексей Вихрев]

v3shin, да.

Answer 1

[Алексей Вихрев]

В общем пришел к такому решению. Встраиваем форму на странице:

<form  action="javascript:void();" onsubmit="if(this.t1.value!='')parent.findString(this.t1.value);return(false);">
    <input  type="text" id="t1" name="t1" placeholder="Введите текст для поиска на странице" size="20">
    <input  type="submit" name="b1" value="Найти" _mstvalue="1183130">
</form>
<p class="results"></p>

Код JavaScript который будет работать только на браузерах, поддерживающих window.find, на Opera не работает, выведется сообщение, что в браузере не поддерживается.

var TRange=null;

function findString (str) {
 if (parseInt(navigator.appVersion)<4) return;
 var strFound;
 if (window.find) {
  strFound=self.find(str);
  if (!strFound) {
   strFound=self.find(str,0,1);
   while (self.find(str,0,1)) continue;
  }
 }
 else if (navigator.appName.indexOf("Microsoft")!=-1) {

  if (TRange!=null) {
   TRange.collapse(false);
   strFound=TRange.findText(str);
   if (strFound) TRange.select();
  }
  if (TRange==null || strFound==0) {
   TRange=self.document.body.createTextRange();
   strFound=TRange.findText(str);
   if (strFound) TRange.select();
  }
 }
 else if (navigator.appName=="Opera") {
    $("p.results").fadeIn().append('К сожалению браузер Opera не сможет запустить скрипт поиска...')
  return;
 }
 if (!strFound) $("p.results").fadeIn().append("Текст '"+str+"' не найден на странице!")
 return false;
}