Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.11.2011, 10:48
Интересующийся
Отправить личное сообщение для Azazaza Посмотреть профиль Найти все сообщения от Azazaza
 
Регистрация: 08.11.2011
Сообщений: 19

Поиск текста на странице
Добрый день, я задался целью создания поиска по сайту, на подобии как в браузере(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 эта функция выполняется, проиходит замена, но после этого все остальные скрипты на странице не работают и сам поиск тоже повторить больше нельзя..
у кого какие соображения?
и вообще не фигней ли я занимаюсь? может есть чтото готовое или какието примеры? целый день гуглил, ничего не нашел(
Ответить с цитированием
  #2 (permalink)  
Старый 08.11.2011, 10:58
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

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

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



...
мне вообще неясно,зачем оно надо?
Ответить с цитированием
  #3 (permalink)  
Старый 08.11.2011, 11:04
Интересующийся
Отправить личное сообщение для Azazaza Посмотреть профиль Найти все сообщения от Azazaza
 
Регистрация: 08.11.2011
Сообщений: 19

попробую, спасибо, надо для поиска как тут http://constitution.kremlin.ru/#article-50-3
помоему это удобно)
Ответить с цитированием
  #4 (permalink)  
Старый 08.11.2011, 11:07
Аватар для Serg_pnz
Сам по себе
Отправить личное сообщение для Serg_pnz Посмотреть профиль Найти все сообщения от Serg_pnz
 
Регистрация: 09.06.2009
Сообщений: 963

Сообщение от melky Посмотреть сообщение
...
мне вообще неясно,зачем оно надо?
Как вариант: при поиске, например, по форуму или каментам. Удобнее было бы подсвечивать вхождения на js, что бы потом быстренько их, подсвечивания, скрыть.
Ответить с цитированием
  #5 (permalink)  
Старый 08.11.2011, 11:25
Интересующийся
Отправить личное сообщение для Azazaza Посмотреть профиль Найти все сообщения от Azazaza
 
Регистрация: 08.11.2011
Сообщений: 19

а почему в моем примере после выполнения все скрипты перестают работать?
и на повторное нажатие на кнопку #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, эти слова подсвечиваются. вписываю другое слово, нажимаю, но второй раз функция уже не работает

Последний раз редактировалось Azazaza, 08.11.2011 в 11:51.
Ответить с цитированием
  #6 (permalink)  
Старый 08.11.2011, 12:46
Интересующийся
Отправить личное сообщение для Azazaza Посмотреть профиль Найти все сообщения от Azazaza
 
Регистрация: 08.11.2011
Сообщений: 19

о, нашел рабочий код)
$("#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);
   });
});


всем спасибо)
Ответить с цитированием
  #7 (permalink)  
Старый 16.02.2013, 00:47
Новичок на форуме
Отправить личное сообщение для masik777 Посмотреть профиль Найти все сообщения от masik777
 
Регистрация: 16.02.2013
Сообщений: 1

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Поиск текста на странице setRange quazare Firefox/Mozilla 0 07.04.2011 22:09
Поиск id на странице Suharik jQuery 2 27.10.2010 17:18
Поиск на странице no_name jQuery 4 07.09.2010 13:26
Поиск текста в блоке со скроллингом lukingnu Элементы интерфейса 0 05.08.2010 22:54
Поиск текста на странице derwish Opera, Safari и др. 5 25.09.2009 13:13