Поиск текста на странице
 

Добрый день, я задался целью создания поиска по сайту, на подобии как в браузере(Ctrl+F)
вот пример http://constitution.kremlin.ru/#article-50-3

последовательность примерно такая:

1) пользователь вводит строку в поле инпута.
2) метод .replace находит и заменяет все совпадения на это же слово, только заключенное в теги ( НАПРИМЕР <srch>искомое слово</srch>).
3) дальше подсчитываю количество эле ментов <srch> на страницы и вывожу число совпадений(НАПРИМЕР: Кол-во совпадений - 10).
4) возле поля ввода есть стрелочки "вперд", "назад", при нажатии на них должен перемещаться по найденым элементам, понятия на имею как это сделать..

1-2)при вводе нового значения методом unwrap удалю все теги <srch>


Вобщем загвоздка пока на втором пункте, есть код:

$("#searchBtn").click(function(){
   var phrase = $('#searchBtn').prev('input').val(); //введенное значение
   var replacement = '<srch>'+phrase+'</srch>';
   var context = $('body');
 
   context.html(
      context.html().replace(new RegExp(phrase, 'gi'), replacement)
   );

});

после нажатия на #searchBtn эта функция выполняется, проиходит замена, но после этого все остальные скрипты на странице не работают и сам поиск тоже повторить больше нельзя..
у кого какие соображения?
и вообще не фигней ли я занимаюсь? может есть чтото готовое или какието примеры? целый день гуглил, ничего не нашел(

пройтись по всему дереву и повырезать эти слова из текстовых нод. отрезки будут искомыми словами, далее заменяем эту текстовую ноду на тег с innerHTML этой ноды.

обратный ход - ищем все элементы с указанным тегом, и заменяем каждый на текстовую ноду, текст которой равен innerHTML этого тега.



...
мне вообще неясно,зачем оно надо?

попробую, спасибо, надо для поиска как тут http://constitution.kremlin.ru/#article-50-3
помоему это удобно)

Как вариант: при поиске, например, по форуму или каментам. Удобнее было бы подсвечивать вхождения на js, что бы потом быстренько их, подсвечивания, скрыть.

а почему в моем примере после выполнения все скрипты перестают работать?
и на повторное нажатие на кнопку #searchBtn тоже не реагирует.

я пробовал закомментить все скрипты которые сеть, оставалось только

$(document).ready(function() {

    $("#searchBtn").click(function(){
        var phrase = $('#searchBtn').prev('input').val();   //строка поиска
        $('body').html(
            $('body').html().replace(new RegExp(phrase, 'gi'), '<span class="light">'+phrase+'</span>'));
        });
});

вписываю в инпут поиска любое слово, нажимаю на #searchBtn, эти слова подсвечиваются. вписываю другое слово, нажимаю, но второй раз функция уже не работает

о, нашел рабочий код)

$("#searchBtn").click(function () {var phrase = $('#searchBtn').prev('input').val(); 
   jQuery(":contains("+phrase+")").not(":has(:contains("+phrase+"))").each(function () {
      var that = $(this);
      var html = that.html();
 
      html = html.replace(new RegExp(phrase, 'gi'), '<span class="light">'+phrase+'</span>');
      that.html(html);
   });
});

всем спасибо)

Подскажите, пожалуйста, как этот код внедрить на страницу