Прошу подсказать как сделать поиск по html странице

@kungu · Регистрация: 22.02.2012

Студворк — интернет-сервис помощи студентам

Здравствуйте!

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

Прощу подсказать как будет выглядеть такой код.

@oshibka404 · 11.06.2012, 00:19

Совершенно бесполезная штука. Во всех браузерах есть Ctrl + F.
А если всё же, то вам нужен JavaScript. Конкретнее - String.indexOf();

@kungu · 11.06.2012, 16:35 **[ТС]**

Может быть кто0нибудь поможет реализовать на определенной странице.

01.04.2013, 07:44

Вот еще один вариант решения:
Javascript код:

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
<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>

HTML код:

HTML5
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
<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'>
 
00:25:8E WeatherC The Weather Channel<br>
00:25:8F TridentM Trident Microsystems, Inc.<br>
00:25:90 SuperMic Super Micro Computer, Inc.<br>
00:25:91 Nextek NEXTEK, Inc.<br>
00:25:92 Guangzho Guangzhou Shirui Electronic Co., Ltd<br>
00:25:93 DatnetIn DatNet Informatikai Kft.<br>
00:25:94 Eurodesi Eurodesign BG LTD<br>
00:25:95 Northwes Northwest Signal Supply, Inc<br>
00:25:96 Gigavisi GIGAVISION srl<br>
00:25:97 KalkiCom Kalki Communication Technologies<br>
00:25:98 ZhongSha Zhong Shan City Litai Electronic Industrial Co. Ltd<br>
00:25:99 HedonEDB Hedon e.d. B.V.<br>
00:25:9A Cestroni CEStronics GmbH<br>
00:25:9B BeijingP Beijing PKUNITY Microsystems Technology Co., Ltd<br>
00:25:9C Cisco-Li Cisco-Linksys, LLC<br>
00:25:9D Private<br>
00:25:9E HuaweiTe Huawei Technologies Co., Ltd.<br>
00:25:9F Technodi TechnoDigital Technologies GmbH<br>
00:25:A0 Nintendo Nintendo Co., Ltd.<br>
00:25:A1 Enalasys<br>
00:25:A2 AltaDefi Alta Definicion LINCEO S.L.<br>
00:25:A3 TrimaxWi Trimax Wireless, Inc.<br>
00:25:A4 Eurodesi EuroDesign embedded technologies GmbH<br>
00:25:A5 WalnutMe Walnut Media Network<br>
00:25:A6 CentralN Central Network Solution Co., Ltd.<br>
00:25:A7 Comverge Comverge, Inc
  
  
</table>
</body>

Думаю это решит данный вопрос с поиском.
Исходник примера: http://adatum.ru/2013/04/01/po... stranitse/

ArtemiyKra · 06.10.2018, 17:11

У меня не роботает

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@kungu 1 / 1 / 0 Регистрация: 22.02.2012 Сообщений: 8

	Прошу подсказать как сделать поиск по html странице 10.06.2012, 23:14. Показов 37469. Ответов 4 Метки нет (Все метки) Здравствуйте! Есть статичный сайт на html. Нужно сделать поиск по странице, т.е. форму вводу слова и поиск соответствия на этой же странице, по аналогии "найти на странице" в браузерах. Прощу подсказать как будет выглядеть такой код. 1

@oshibka404 26 / 25 / 5 Регистрация: 25.04.2012 Сообщений: 73
	11.06.2012, 00:19
	Совершенно бесполезная штука. Во всех браузерах есть Ctrl + F. А если всё же, то вам нужен JavaScript. Конкретнее - String.indexOf(); 0

@kungu 1 / 1 / 0 Регистрация: 22.02.2012 Сообщений: 8
	11.06.2012, 16:35 [ТС]
	Может быть кто0нибудь поможет реализовать на определенной странице. 0

ArtemiyKra 0 / 0 / 0 Регистрация: 05.09.2018 Сообщений: 4
	06.10.2018, 17:11
	У меня не роботает 0