Только для читателей Lifeexample возможно открыть интернет-магазин на Moguta.CMS со скидкой в 15%

<<< Корзина для интернет магазина php || Защита от SQL инъекций >>>

JavaScript поиск по странице

05.03.2012
JavaScript поиск по странице

Здравствуйте уважаемые читатели блога LifeExample, все мы пользуемся электронным поиском по странице в наших веб браузерах при помощи горячих клавиш CTRL+F либо F3. И кажется уже от таких привилегий нам никуда не деться, так как самостоятельно читать все содержимое страницы, зачастую бывает некогда. Беда в том, что далеко не все начинающие пользователи знают о таких скрытых возможностях любого браузера, но им можно помочь, прикрутив самодельный JavaScript поиск по странице, в тех проектах, где без него совсем никак.

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

Искать на странице нужную информацию будет удобнее, если для этого реализовать соответствующий интерфейс:

Форма ввода поиска по странице

В поле нужно ввести слово для поиска и нажать кнопку «Искать», тут все интуитивно понятно. Давайте перейдем к реализации самого механизма поиска по странице и посмотрим, какие могут быть нюансы при его реализации.

Как искать слово на странице?

  1. Нужно проверить корректность ввода данных, в нашем случае мы только обрежем пробельные символы по бокам фразы для поиска, а также просто проверим на саму форму на наличие в ней поискового запроса.
  2. Так как данные статичны, и хранятся только в DOM’e страницы, то поиск по ней будет производиться именно по содержимому DOM (Document Object Model).
  3. Важным является, показать пользователю все результаты, которые нашел наш JavaScript поиск. Т.е. подсветить фон под найденными частями содержимого страницы.
  4. Так как этот мини модуль поиска по странице имеет смысл подключать только к большим страницам, которые имеют прокрутку, то при наличии найденной фразы, где-то вне зоны видимости неплохо будет прокрутить scroll до найденного элемента.
  5. Повторное использование поиска, также является важным моментом в работе данного скрипта. Т.к. подсветка найденных частей является результатом изменения содержимого DOM объекта, то каждый последующий цикл поиска должен затирать результаты предыдущего и возвращать содержимое страницы к исходному виду, для дальнейших изменений новой итерации.

Ну, так вкратце вроде бы и все. Несмотря на объемность выделенных пунктов, реализация их не занимает много времени и места в коде, вот готовый скрипт для механизма JavaScript поиска по странице :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<script type="text/javascript">
var lastResFind=""; // последний удачный результат
var copy_page=""; // копия страницы в ихсодном виде
function TrimStr(s) {
     s = s.replace( /^\s+/g, '');
  return s.replace( /\s+$/g, '');
}
function FindOnPage(inputId) {//ищет текст на странице, в параметр передается ID поля для ввода
  var obj = window.document.getElementById(inputId);
  var textToFind;
 
  if (obj) {
    textToFind = TrimStr(obj.value);//обрезаем пробелы
  } else {
    alert("Введенная фраза не найдена");
    return;
  }
  if (textToFind == "") {
    alert("Вы ничего не ввели");
    return;
  }
 
  if(document.body.innerHTML.indexOf(textToFind)=="-1")
  alert("Ничего не найдено, проверьте правильность ввода!");
 
  if(copy_page.length>0)
        document.body.innerHTML=copy_page;
  else copy_page=document.body.innerHTML;

 
  document.body.innerHTML = document.body.innerHTML.replace(eval("/name="+lastResFind+"/gi")," ");//стираем предыдущие якори для скрола
  document.body.innerHTML = document.body.innerHTML.replace(eval("/"+textToFind+"/gi"),"<a name="+textToFind+" style='background:red'>"+textToFind+"</a>"); //Заменяем найденный текст ссылками с якорем;
  lastResFind=textToFind; // сохраняем фразу для поиска, чтобы в дальнейшем по ней стереть все ссылки
  window.location = '#'+textToFind;//перемещаем скрол к последнему найденному совпадению
 }
</script>
<body>
<h2>JavaScript поиск по странице</h2>
<input type="text" id="text-to-find" value="">
<input type="button" onclick="javascript: FindOnPage('text-to-find'); return false;" value="Искать"/>
<br/><i>Введите слово или фразу для поиска.</i>
<hr/>

<table border='2' cellpadding='20'>
 <tr><th>Товар</th><th>Вес</th><th>Стоимость</th></tr>
 <tr><td>Монитор 19 дюймов</td><td>1 кг</td><td>1900 руб.</td></tr>
 <tr><td>монитор 18 дюймов</td><td>2 кг</td><td>1800 руб.</td></tr>
 <tr><td>Монитор 20 дюймов</td><td>2 кг</td><td>1900 руб.</td></tr>
</table>
</body>

Попробуйте, протестировать поисковыми запросами «19», «2 кг» и другими. Также советую проверить авто скролинг, для этого добавляйте текст до тех пор пока справа не появится полоса прокрутки.

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

Пример JavaScript поиска по странице

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

Реализованный в данной статье, с помощью языка JavaScript , поиск по странице валиден во всех браузерах, включая Internet Explorer.

Чтобы не пропустить публикацию следующей статьи подписывайтесь на рассылку по E-mail или RSS ленту блога.

Нравится

Комментарии

  • Алексей

    Спасибо за статью, Марк!
    У меня только одно предложение — вместо alert использовать document.whrite — удобнее, чем
    выскакивающие окошки. Может, я неправ, конечно.

    • Mark

      Алексей , верно лучше конечно document.whrite , но опять таки повторюсь, что все скрипты на данном сайте лишь заготовки, полноценный функционал кому как хочется сами доработают.

  • Дiмка

    Спасибо! Очень полезно!

  • Юрий

    Доброго времени суток.
    То же есть минусы. наберите в латинице один знак — «a», «b», «s» «-» тире и посмотрите, что получится. Весь HTML на изнанку.

  • Юрий

    /g — поиск, не серьезно
    -серьезно /gi

    • Mark

      Вы правы Юрий, правильно для поиска использовать в регулярном выражении вместе с g опцию i . для тех кто не знает для чего , поясню: i — позволяет не учитывать регистр слова.
      Я немного исправил код, учитывая ваши замечания. Но без сомнения дырок в этом поиске еще полно.

  • Юрий

    «Порвал» I-net в поиске необходимого «Поиска»
    Ваш скрипт более менее похож на нужное, но тоже требует доработок.

  • Юрий

    1
    if (textToFind == "")

    Надо три знака:

    1
    if (textToFind ==="")
  • Юрий

    Легкая ошибка — так есть: s = s.replace( /^\s+/g, »);
    return s.replace( /\s+$/g, »);- так надо:
    s = s.replace( /^-_=\s+/g, »);
    return s.replace( /-_=\s+$/g, »);

  • Юрий

    Mark,ответ в электронке.

    • Mark

      К сожалению, я не вижу от вас письма в моей почте. Попробуйте воспользоваться формой обратной связи в разделе «Контакты».

  • Юрий

    Значит в спаме

  • Юрий

    Отправил через форму

  • Алексей

    Марк, очень хотелось бы увидеть статью с разбором регулярок в PHP и JS. Это пожелание читателя 🙂

  • Юрий

    А что Вас конкретно в регулярках иртересует…?

  • Юрий

    Марк, предлагаю Вашу регулярку сделать так:
    s = s.replace(/^[\s]+|[\s]+$/g, »);
    return s.replace();
    ну, а свою я добил следующим образом:
    s = s.replace(/^[\s\A-z\\\-=_»»»\.]+|[\s\A-z\\\-=_»»»\.]+$/g, »);
    return s.replace();
    Нужна оптимизация — руки не доходят.;(

  • Alexey

    А что Вас конкретно в регулярках иртересует…?

    Юрий, я изучал регулярные выражения только теоретически, в рамках универа.
    Например, я знаю, что любой регулярный язык можно трансформироват в регулярное выражение,
    а для любого регулярного выражения можно построить конечный определенный/неопределенный автомат.
    И я знаю как это делать. То есть я прекрасное понимаю смысл и целеполагание Рег. выражений. Но это все сухая теория.
    В ПХП и JS — мне не понятен зачастую сам синтаксис. Хотелось бы разбора с примерами из жизни.
    Вот как в этой статье, только с разъяснениями, напр., что значит «/^\ итд.

  • Alexey

    Юрий, вот если бы вы дали расшифровку этой клинописи (левый параметр функции replace()),
    я бы уже был очень признателен.

    1
    s = s.replace(/^[\s\A-z\\\-=_''""\.]+|[\s\A-z\\\-=_''""\.]+$/g, ”);
  • Alexey

    Вопрос снят, Марк! Нашел у вас эту статью!

    http://lifeexample.ru/php-primeryi-skriptov/regulyarnyie-vyirazheniya-v-php.html

  • Юрий

    Для Alexey.
    Ой….
    Вообще это должен делать ведущий топика.Кратко не рассказать, надо открывать «Тему». Если Марк откроет этот топик- «Регулярные Выражение«, тогда по проще будет. Ну, а на этот момент только по существу…
    Попробуем разобрать данную канитель…
    За шаблон взят исходник Марка (чуть выше).

    Необходима следующая доработка:

    Входные данные начало строки input (для меня)
    — любые символы : ноль
    — латинница : ноль
    — входное слово не мене 2-3х знаков (по одному знаку: символу-букве-цифре –не пропускаем)

    Имеем «исходник», писать новый : нет времени, лень, «голова-дым».
    Марк использует метод replace.

    Что про него, replace — известно?

    А известно то, что replace может заменять вхождения регулярного выражения не только на строку, но и на результат выполнения функции. Его полный синтаксис, как пример — такой:

    1
    var newString = str.replace(regexp/substr, newSubStr/function)

    Ну и далее как – regexp Объект RegExp. Его вхождения будут заменены на значение, которое вернет параметр номер 2

    Substr — cтрока, которая будет заменена на newSubStr.
    newSubStr — cтрока, которая заменяет подстроку из аргумента номер 1.
    Function — функция, которая может быть вызвана для генерации новой подстроки (чтобы подставить ее вместо подстроки, полученной из аргумента 1).

    К сожалению метод replace не меняет строку, на которой вызван, а просто возвращает новую, измененную строку.
    Чтобы осуществить глобальную замену, необходимо включить в регулярное выражение флаг «g«.
    Если первый аргумент — строка, то она не преобразуется в регулярное выражение, так что, например,

    1
    var ab = "a b".replace("\\s","..") // = "a b"

    Вызов replace оставил строку без изменения, т.к искал не регулярное выражение \s, а строку «\s«.
    Теперь необходимо понимать что:
    \ — Для обычных символов — делает их специальными. Например, выражение /s/ ищет просто символ ‘s’. А если поставить \ перед s, то /\s/ уже обозначает пробельный символ. И наоборот, если символ специальный, например *, то \ сделает его просто обычным символом «звездочка». Например, /a*/ ищет 0 или больше подряд идущих символов ‘a‘. Чтобы найти а со звездочкой ‘a*‘ — поставим \ перед спец. символом: /a\*/.
    А так же необходимо понимать и это:
    — когда регулярное выражение создается при помощи конструктора new RegExp(…), необходимо помнить, что обратные слеши (\) должны экранироваться, напр.:

    1
    var expr = new RegExp('\\w', 'ig');

    При использовании литерального формата, этого делать не нужно:

    1
    var expr = /\w/gi;

    Обе записи эквивалентны.
    Ну вот пока и все.

    • Mark

      Приношу извенение за задержку в ответах на комментарии, два дня добирался из Питера домой на Дальний восток)) Сейчас пока в отпуске, не всегда будет время поддерживать продуктивную переписку с комментаторами. Радует, что вы стали общаться между собой и разбираться в проблемах. Постараюсь на днях найти время, чтобы модернизировать систему выкладки комментариев, сейчас она просто деревянная и не удобная (. Скорее всего я перенесу ваши рассуждения из этой части блога в статью про регулярки.
      Юрий, я получил ваше письмо, через обратную связь, обещаю по позже отписаться)

  • Юрий

    Mark, спасибо. Хорошего дня, Хорошего отдыха.

  • Алексей

    Юрий, большое спасибо за труд!
    Усвоил.

  • Юрий

    Уважаемый Алексей.
    Я поступаю хитро, и привожу свою строку к «Булевы выражениям»
    И Вам, я уверен, бужет намного проще понять, если вы определите, что моя строка

    1
     s = s.replace(/^[\s\A-z\\\-=_''""\.]+|[\s\A-z\\\-=_''""\.]+$/g, ”);

    — не что иное, как элемент «Исключающий ИЛИ» .

  • Артем

    день добрый. я в скриптах практически не шарю. как сделать поиск не по всей страничке, а в определнном поле с заданным Id, например в табличке или абзаце?? Заранее спасибо=)

    • Вам нужно заменить

      1
      2
      3
        if(copy_page.length>0)
              document.body.innerHTML=copy_page;
        else copy_page=document.body.innerHTML;

      на вот это

      1
      2
      3
        if(copy_page.length>0)
              document.getElementByid('Ваш блок').innerHTML=copy_page;
        else copy_page=document.getElementByid('Ваш блок').innerHTML;
  • Артем

    Спасибо большое

    • JAMLIGHT

      с заменой выходит ошибка

  • Иван

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

    • Можно. Как вариант подойдет использование jQuery плагина jq.scrollTo-min.js

  • Roket

    ЭЭ мне одному показалось или если искать «2» то что то html неправильно становится из-зf тега h2

    • Вроде был такой касяк, но по моему в комментариях было решение. Хотя я уже не помню. 🙂

  • Арон

    Большое Вам спасибо. В ИЕ9 есть проблема. Не очищается поле ввода. Все время возращается первый поиск. В опере после нажатия на кнопку поле поиска чистое.

  • Владимир

    Добрый день. А подскажите, можно код заставить выделять не слово, а а блок в котором он найден и слово соответственно.
    Допустим нужно выделить (скрыть) строки в таблице в которых нет найденого слова.
    Спасибо.

    • Как вариант можно, для этого найти все блоки с текстом на странице, и присвоить им css свойство display:none, затем для каждого найденного совпадения найти родительский элемент, и присвоить ему css свойство display:block.

    • Владимир

      Mark, спасибо. В теории это так, всё понятно. Но как обратится к блоку содержащему слово?
      Например такова структура:
      Тескт … слово … текст …
      Как зная идентификатор у «слово» обратится к содержащему его диву?

    • Владимир

      Mark, спасибо. В теории это так, всё понятно. Но как обратится к блоку содержащему слово?
      Например такова структура:

      1
      <div>Тескт ... <a src='#'>слово</a> ... текст ...</div>

      Как зная идентификатор у «слово» обратится к содержащему его диву?

    • Я думаю стоит покопать в сторону jquery библиотеки
      и события parent() или parents():

      1
      $(this).parents("div")
  • Владимир

    Тут в скрипте если есть несоответствие слова по регистру то выдается сообщение:

    1
    alert("Ничего не найдено, проверьте правильность ввода!");

    Можно всё для проверки преобразовывать в нижний регистр:

    1
    if(document.getElementById('price').innerHTML.toLowerCase().indexOf(textToFind.toLowerCase())=="-1")
  • ink5054

    Здравствуйте. Помогите изменить так что бы поиск искал без учета дефисов «-«, например набираешь 2722 и находил номер 964 623-27-22

  • Владимир

    Вот переделал код под свои нужды, блоки скрываются…
    Теперь вопрос, можно ли средствами скрипта каждому из блоков задать уникальный ИД? Чтобы не делать этого вручную.
    Спасибо.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    <html>
        <head>
            <title>Find page</title>
            <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
            <script>
               
                var CopyPage = []; // копия страницы в ихсодном виде
                           
                function TrimStr(s) {
                    s = s.replace( /^\s+/g, '');
                    return s.replace( /\s+$/g, '');
                }
               
               
                function FindOnPage(inputId) {//ищет текст на странице, в параметр передается ID поля для ввода

                    var obj = window.document.getElementById(inputId);
                    var textToFind;

                    if (obj) {
                        textToFind = TrimStr(obj.value);//обрезаем пробелы
                    } else {
                        alert("Введенная фраза не найдена");
                        return;
                    }
                   
                    if (textToFind == "") {
                        alert("Вы ничего не ввели");
                        return;
                    }
                            if(document.getElementById('price').innerHTML.toLowerCase().indexOf(textToFind.toLowerCase()) == -1)
                    {
                    alert("Ничего не найдено, проверьте правильность ввода!");
                    }
                   
                    else
                    {
                   
                    for (var i=0; i<5; i++)
                    {
                    var id=document.getElementById("fing_"+i);

                    if (CopyPage[i] == undefined)
                         {CopyPage[i]=id.innerHTML;}
                    else {id.innerHTML=CopyPage[i];}

                   
                    if(~id.innerHTML.toLowerCase().indexOf(textToFind.toLowerCase())) //(если не -1)
                    //if (copy_page[i] != '')
                        {
                        id.style.display='block';
                        id.innerHTML = id.innerHTML.replace(eval("/"+textToFind+"/gi"),"<a name="+textToFind+" class=find>"+textToFind+"</a>"); //Заменяем найденный текст ссылками с якорем;

                        } else {
                                            id.style.display='none';
                        }}
                    }
                    }  
               
            </script>
               
            <style type='text/css'>
                a.find {background: #1f1;}
                p {float: left; display: block; width: 300px; height:100px; background: #ccc; border: 1px solid black; margin: 2px;}
                div {display: block;}
                .price {bakgraund: #333;}
                .prod {border: 1px solid black; margin: 10px; padding: 4px; width: 507px; display: block;}
                .left {float: left;}
                .right (float: right;}
            </style>
        </head>
        <body>
            <hr>
            <h1>Find form</h1>
            <hr>
            <form action='' method='GET'>
                <input type="text" id="find" value="">
                <input type="button" onclick="javascript: FindOnPage('find'); return false;" value="Искать"/>
            </form>
            <hr>
            <div class='price' id='price'>
                <div class='prod' id='fing_0'>
                    <img src=left1.jpg class='left'>
                    <p>Дрель ручная модель дресированая класстная</p>
                    <img src=right1.jpg class='right'>
                </div>
                <div class='prod' id='fing_1'>
                    <img src=left1.jpg class='left'>
                    <p>Очень хорошая мойка с краном, материал сталь</p>
                    <img src=right1.jpg  class='right'>
                </div>
                <div class='prod' id='fing_2'>
                    <img src=left1.jpg class='left'>
                    <p>Болгарка Штерн 10, диаметр диска 150 мм</p>
                    <img src=right1.jpg  class='right'>
                </div>
                <div class='prod' id='fing_3'>
                    <img src=left1.jpg class='left'>
                    <p>Дрель ручная, чуть по хуже предыдущей</p>
                    <img src=right1.jpg  class='right'>
                </div>
                <div class='prod' id='fing_4'>
                    <img src=left1.jpg class='left'>
                    <p>Мойка для посуды универсальная, обём 10 л</p>
                    <img src=right1.jpg  class='right'>
                </div>
            </div>

        </body>
    </html>
    • Сергей

      Владимир, спасибо большое за код.
      Поставил на сайт работает отлично.
      Подскажите, а как то решили вопрос с автоматической подстановкой к каждому блоку уникального id?

  • maxi

    Ага. Работает.

    Итак, использовал код, доработал что бы не глючило при вводе 1-2 символов или цифр, доработал, что бы надежно переходил к первому найденному вхождению текста.

    Но теперь выяснилось, что поиск и замена происходит по всему тексту страницы и по атрибутам HTML тегов.

    в итоге код:

    …… Если вам действительно нужна консультация по таким вопросам — обращайтесь к профессионалам, например, в «» Австрию-Хоум».. Консультировались ……

    при поиске по слову austria повреждается.

    Как настроить поиск и замену только в видимом тексте,
    как это делает настоящая кнопка f3?

    И еще, а как перейти к следующему вхождению?

  • maxi

    да блин, как код вставить. там слово austria находится в аттрибутах якоря.

  • Андрей

    А как сделать чтобы по «Enter» искал?

  • Данил

    Вы даже не представляете как вы мне помогли.Огромное спасибо!

  • Николай

    В JS я совсем новичок. А можно ли используя Ваш скрипт, сделать так, чтобы по клику по ссылке открывался сайт _http://какойтосайт.ру в новом окне и страница автоматом пролистывалась до нужного слова/фразы? Где то читал, что такое средствами js не сделать, это правда? Заранее благодарен за ответ.

  • Николай

    Спасибо за ответ, но на предложенном сайте уже имеются нужные якори. А как быть,если их нет? Вот есть страница(к ней я никого отношения не имею) там представлены каналы и соответствующие спутники вещания. Мне нужно написать скрипт который открывает с моего сайта, эту страницу в новом окне и пролистывает ее до нужного мне канала, например до «Первый канал». Таким образом нужно на загружаемой странице осуществить поиск фразы «Первый канал» ,а затем изменить загруженный html, подменив «Первый канал» якорной ссылкой «Первый канал» с подсветкой (как в Вашем скрипте)с последующим пролистыванием до созданного якоря. Надеюсь понятно объяснил. Мне интересно, возможно ли такое?

    • Если на странице нет якорей, то никак нельзя такое сделать.

  • Николай

    Спасибо. Т.е видоизменять загружаемые сторонние страницы посредством JS нельзя?

  • Николай

    Спасибо за ответы. Вопрос снят. Действительно такие «фокусы» со сторонними страницами не пройдут.

  • Наталья

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

    Хотелось бы узнать каким образом в предложенном Вами варианте можно добавить функцию перехода к каждому последующему найденному вхождению? И еще как сделать чтобы выделения снимались допустим по щелчку мыши на странице?

    • Написать данный функционал можно, но если я начну описывать как, то это потянет на новую большую статью.

  • Сергей

    Здравствуйте
    А как сделать так, чтоб при нажатии Enter введённая фраза в поле не стиралась?

  • Дмитри

    Спасибо за статью! Очень помогла.

  • warcat

    Приветик, Марк.
    Во 1х СПАСИБО за Ваше время и предложенную функцию.
    Убил 4 часа.. до рук не довел.
    Работает но очень криво.
    Дефекты странные :
    1) последний поиск остается в строке даже после перезагрузки странички
    2) странный эффект — после 1го поиска — почему то портятся НЕКОТОРЫЕ SWF файлы на страничке (и остаются испорченные до ее перезагрузки.. : * )))) да да.. знаю что это странно — но это так.
    3) при вводе цифр (любых) и одиночных букв — html убивается об стенку и страничке приходет абзац полный.
    4) есть еще куча непоняток..
    решил не пользовать.. слишком тяжело довести до ума — поищу более сьедобный вариант
    НО ВСЕ РАВНО СПАСИБО !!!
    ИДЕЯ КЛАССНАЯ..

  • grozzzny

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    ////////////////////////////////////////search
    function searchGlobalText(ob, textToFind){
        for(var i=0; i<ob.childNodes.length; i++){
            if(ob.childNodes[i].nodeType==1){
                if(ob.childNodes[i].hasAttribute('srh')){
                ob.childNodes[i].parentNode.innerHTML = ob.childNodes[i].parentNode.textContent;
                            //здесь можно обращать к parentNode:
                /*var rng = document.createRange();
                rng.selectNode(ob.childNodes[i]);
                rng.deleteContents();*/

                }else {
                searchGlobalText(ob.childNodes[i], textToFind);
                };
            }else if(ob.childNodes[i].nodeType==3){
                if(eval("/"+textToFind+"/gi").test(ob.childNodes[i].nodeValue)){
                    var root = ob.childNodes[i];
                    var content = root.nodeValue;

                        if ( document.createRange ) {
                        var rng = document.createRange();
                        rng.setStart( root, content.toLowerCase().indexOf( textToFind.toLowerCase() ) );
                        rng.setEnd( root, content.toLowerCase().indexOf( textToFind.toLowerCase() ) + textToFind.length );
                        var highlightDiv = document.createElement('a');
                        highlightDiv.setAttribute('name',textToFind);
                        highlightDiv.setAttribute('srh','');
                        highlightDiv.style.backgroundColor = 'red';

                         rng.surroundContents( highlightDiv );
                         break;
                        } else {

                        var rng = document.body.createTextRange();

                        rng.moveToElementText( root );
                        // Найдем текст и свернем диапазон до него
                        if ( rng.findText( textToFind ) )

                        rng.pasteHTML( '<a name="'+textToFind+'" srh style="background:red;">' + textToFind + '</a>' );
                         break;
                        }

                }
            }
       
       
        }
    }
    function enterSearch(){
        if(event.keyCode==13){
        FindOnPage('text-to-find');
        }
    }
    function FindOnPage(inputId) {//ищет текст на странице, в параметр передается ID поля для ввода

      var textToFind = document.getElementById(inputId).value;

      if (textToFind == "") {
        document.getElementById('search_log').innerHTML="Вы ничего не ввели";
        setTimeout(function(){document.getElementById('search_log').textContent='';}, 2000);
        return;
      }
            //первый параметр: либо body либо ссылка на объект // во второй параметр, что ищем
        searchGlobalText(document.getElementById('windowContent'), textToFind);
        window.location = '#'+textToFind;//перемещаем скрол к первому найденному совпадению
     }
    • Antony

      А как «тело» самого поиска прикрутить к вашему усовершенствованному коду?

  • Александр

    Не могу разобраться, на странице идет что-то типа оглавления, поиск осуществляется корректно, скрол пробрасывает. Но оглавление в виде href, стало быть всё что идёт после выделенного слова теряет этот тег и строка становится текстом, что не удобно и быть не должно, помогите разобраться

  • Natalia

    Спасибо!! Полезно!

  • Ваган

    А почему при нажатии на «Искать» скрипт кидает на главную страницу?

  • Анастасия

    а можно ли модернизировать чтобы искало на сайте?

  • Нурбакыт

    Спасибо вам большое.

  • Александр

    Подскажите, кто может… Как дописать этот код, чтобы не убивались ссылки href в списке где идет поиск?

  • Виктор

    Здравствуйте! Очень полезно! Спасибо вам!

  • petruxa

    Добрый день, спасибо за код.
    Помогите разобраться, в чём может быть проблема, во всех браузерах поиск нормально работает, но в IE 8 версии не совсем корректно: искомую фразу находит, фокусируется, но в поле ввода текста отображается «<a и после поля слово, которое искали. После повторного поиска какого либо слова, поиск отрабатывает, но в поле вводе текста отображается первое искомое слово, и так до перезагрузки страницы…
    Помогите разобраться, что за мистика?)) Заранее спасибо!!!

  • Наталья

    Добрый всем день! Подскажите пожалуйста, почему у меня по данному коду ищет только 1 слово, т.е., если вводишь фразу, даже из 2-х слов, поиск не происходит. И ещё, как преобразовать данный код, чтоб все предложения с найденным текстом появлялся в отдельном окне? Помогите пожалуйста, а то текст очень огромный, даже прокрутка не помогает.

  • JAMLIGHT

    Модернизируйте код скрипта для поиска текста только в определённом поле

  • Оставить комментарий

    Не отвечать

    Подписаться на комментарии к этой статье по RSS

    Яндекс.Метрика