Организация поиска по странице - JavaScript, Ajax

GaLiof · 09.12.2010, 14:28

Здравствуйте. Имеется такой вопрос: как организовать поиск по странице с выделением абзаца, в котором находится найденное слово? Точнее помощь нуна именно в написании функции поиска...
т.е. я написал:

Код HTML:

<html>
<head> 
<title> Поиск текста </title>
 </head>
<body>
<b> В Калифорнии обнаружили "инопланетные" формы жизни </b>
<div id=1> <p> Дело в том, что бактерии из озера Моно не просто нейтрализуют ядовитый мышьяк - они используют его в качестве одного из основных "кирпичиков" для построения своих клеток. 
Приспосабливаясь к существованию в мышьяковой среде, бактерии научились встраивать As в свою ДНК, а также в молекулы, при помощи которых живые существа запасают энергию.</p>     </div>
<div id=2> <p> В длинных цепях дезоксирибонуклеиновых кислот (ДНК) закодирована вся генетическая информация об организмах, так что их по праву можно назвать главными молекулами клетки. 
Молекулы ДНК представляют собой полимеры, состоящие из отдельных блоков четырех различных типов. Каждый блок (их называют нуклеотидами), в свою очередь, состоит из трех составных 
частей: азотистого основания (сложное циклическое соединение), сахара дезоксирибозы и остатка фосфорной кислоты. Нуклеотиды соединяются друг с другом через сахар и фосфат, образуя
так называемую фосфодиэфирную связь </p> </div>
<div id=3> <p> Именно ее свойства определяют многие особенности ДНК - если бы она была немного менее прочной, то цепи ДНК просто рассыпались бы, а более прочную связь было бы труднее разрывать 
специальным ферментам, осуществляющим, например, "ремонт" поврежденных участков ДНК. Не менее важную роль фосфодиэфирная связь играет для хранения энергии в клетках - одним из способов ее 
запасания является "сохранение" джоулей в форме такой же связи в молекулах аденозинтрифосфата (АТФ). АТФ поставляет энергию для множества биохимических процессов, в частности, для синтеза ДНК. 
И опять же, именно конкретные свойства фосфата определяют способность АТФ работать универсальной "батарейкой". </p> </div>
<div id=4> <p> GFAJ-1 используют мышьяк вместо фосфора – то есть в состав ДНК, РНК и АТФ входят остатки не фосфорной, а мышьяковой кислоты (в периодической системе элементов мышьяк находится прямо
 под фосфором, и, соответственно, образует химические соединения той же структуры). Пока ученые не могут объяснить, как именно калифорнийским бактериям это удается - остатки мышьяковой кислоты, 
 например, несколько менее устойчивы в воде по сравнению с фосфатами. </p> </div>
 
 <script language="javascript">
 function SeachOnPage{
 
}
 </script>
<input type="text" id="text-to-find"> <input type="button">

</body>

</html>

Для каждого абзаца присвоил свой id, думаю именно так надо будет в дальнейшем выделять весь абзац, по его номеру. Но как должна выглядеть функция поиска...? Код должен быть без применения php

Пожалуйста помогите... А то пропаду

SkyM@n · 09.12.2010, 16:17

jQuery Вам в помощь и без проблем.

GaLiof · 09.12.2010, 16:26

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

Код:

function searchTextOnPage(inputId) {
  var obj = window.document.getElementById(inputId);
  var textToFind;
  if (obj) {
    textToFind = obj.value;
  } else {
    alert("Немогу найти текст = " + inputId);
    return;
  }
  if (textToFind == "") {
    alert("Вы ничего не ввели");
    return;
  }
  document.body.innerHTML = document.body.innerHTML.replace(eval("/"+textToFind+"/g"),"<b style='color:yelow'>"+textToFind+"</b>");
  var obj = window.document.getElementById(inputId);
  obj.value = textToFind;
}
</script>
<input type="text" id="text-to-find"> 
<input type="button" onclick="javascript: searchTextOnPage('text-to-find'); return false;"/>

Но он:1. выделяет только одно слово а не абзац.
2. не работает, если абзацам присваивать id. Может его можно как либо изменить под необходимое задание? Первый раз сталкиваюсь с яваскриптом, по этому простите за глупые вопросы...

KPEATuBHO · 10.12.2010, 11:01

Вот есть такой вариант:

Код:

 <script language="javascript">
 function SearchOnPage(searching_text){
all_divs=document.getElementsByTagName('div');
for(i=0;i<all_divs.length;i++){
text_cur_div=all_divs[i].innerHTML.toLowerCase();
if (text_cur_div.indexOf(searching_text.toLowerCase())!="-1") all_divs[i].style['color']="#FF0000";
}
}
 </script>
<input type="text" id="text-to-find">
 <input type="button" onclick="SearchOnPage(document.getElementById('text-to-find').value)">

ulot3049 · 05.03.2012, 15:47

Все что вы ищите о реализации поиска по странице можно подчерпнуть тут:

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

Успехов!

Naive · 05.03.2012, 15:58

http://easywebscripts.net/javascript/godom.php
5 пример в самом низу

05.03.2012, 15:58	#6
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	http://easywebscripts.net/javascript/godom.php 5 пример в самом низу Alar, верни репу!

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Организация поиска в бд	Rainkhz	БД в Delphi	8	05.07.2010 21:46
Организация поиска и ввода данных	Guggernaut	БД в Delphi	1	15.06.2010 04:30
Организация поиска в Дельфи	Тов. Дмитрий	Помощь студентам	0	13.05.2010 15:20
Организация поиска)	insomnia87	Microsoft Office Excel	9	22.01.2009 11:56

09.12.2010, 16:17	#2
SkyM@n Laravel/Vue expert Старожил Подтвердите свой е-майл Регистрация: 08.08.2007 Сообщений: 2,832	jQuery Вам в помощь и без проблем.

09.12.2010, 16:26	#3
GaLiof Пользователь Регистрация: 20.03.2009 Сообщений: 52	В том то всё и дело, что доп.библиотеками пользоваться нельзя. Нужно чтобы поиск осуществлялся стандартными средствами яваскрипта. Имеется такой вариант: Код: function searchTextOnPage(inputId) { var obj = window.document.getElementById(inputId); var textToFind; if (obj) { textToFind = obj.value; } else { alert("Немогу найти текст = " + inputId); return; } if (textToFind == "") { alert("Вы ничего не ввели"); return; } document.body.innerHTML = document.body.innerHTML.replace(eval("/"+textToFind+"/g"),"<b style='color:yelow'>"+textToFind+"</b>"); var obj = window.document.getElementById(inputId); obj.value = textToFind; } </script> <input type="text" id="text-to-find"> <input type="button" onclick="javascript: searchTextOnPage('text-to-find'); return false;"/> Но он:1. выделяет только одно слово а не абзац. 2. не работает, если абзацам присваивать id. Может его можно как либо изменить под необходимое задание? Первый раз сталкиваюсь с яваскриптом, по этому простите за глупые вопросы...

05.03.2012, 15:47	#5
ulot3049 Регистрация: 29.01.2012 Сообщений: 3	Все что вы ищите о реализации поиска по странице можно подчерпнуть тут: JavaScript поиск по странице Успехов!