Tag Archives: поиск по сайту

Скрипт поиска по сайту с прокруткой на JavaScript

  By admin | 12 Январь 2011 - 10:46 | Создание сайтов Оставить комментарий

Недавно копался в интернете в  поиске  простенького  скрипта  поиска по странице для одного сайта. Как ни странно, ни одного рабочего готового скрипта не нашел. В основном проблема заключалась в отсутствии кроссбраузерности (скрипт работает вInternetExplorer, но не работает в Mozilla). Одна из причин – это устаревшие страницы с постами по JavaScript в поисковой выдаче. Но так как скрипт мне был необходим, то пришлось «точить» его самому.

Задумка такова:

  • скрипт ищет совпадения на странице и выделяет их другим цветом;
  • после того как совпадения найдены – крутим страницу до первого совпадения.

Скрипт получился довольно простой. Принцип работы такой:

  • ищет совпадения на странице;
  • выделяет найденные совпадения другим цветом и обрамляет найденный текст ссылкой-якорем;
  • прокручивает страницу до первого якоря.

Наш скрипт будет состоять из двух частей.

  • Вставляем кусок скрипта между тегами <head>…</head> страницы

<script language=»JavaScript»>

function findInPage(str) {

var pattern = new RegExp(«[^value=\"](«+str+»)», «gi»);

var txt = document.body.innerHTML;

if( str==»" || !pattern.test(txt) ) {

alert(«Совпадения не найдены. Повторите поиск.»);

return 0;

}

txt = txt.replace(pattern, «<span style=’color : red;’><a name=’search’> $1</a></span>»);

document.body.innerHTML = txt;

location.replace(‘страница_поиска.html#search’);

}

</script>

  • В тело документа между тегами <body>…</body> вставляем форму поиска:

<div id=»vivod»></div>

<strong><span style=’font-size: 10px;’>Перед поиском новой позиции необходимо нажать «Сброс»</span></strong>

<form id=»search»>

<input name=string onChange=»n = 0;» value=»" size=35 >

<input name=»button2″

onClick=»location.reload();» value=»Cбросить»>

<input name=»button»

onClick=»findInPage(this.form.string.value);» value=»Найти»>

</form>

Пример работы скрипта можно посмотреть здесь.

На мой взгляд, реализация с якорями есть самая простая. Как раз то, что мне и было нужно. Если кому то данный скрипт пригодиться – рад помочь.

Основные теги , ,