Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.01.2010, 09:08
Интересующийся
Отправить личное сообщение для andikk Посмотреть профиль Найти все сообщения от andikk
 
Регистрация: 14.08.2009
Сообщений: 13

Форма для поиска по странице средсвами javascript
Очень нужен код, который бы отображал на страничке поле ввода и кнопку "Найти".
Нужно чтобы после ввода строки в поле ввода и нажатия на кнопку "Найти" осуществлялся поиск по текущей странице. Найденная строка должна подсвечиваться цветом.
В общем замена стандартному ctrl+f

Накидайте, пожалуйста.
Ответить с цитированием
  #2 (permalink)  
Старый 11.01.2010, 14:56
жажду знаний
Отправить личное сообщение для bushstas Посмотреть профиль Найти все сообщения от bushstas
 
Регистрация: 17.07.2009
Сообщений: 202

я не знаток но я такое делал, может не образцово но работало

мы имеем пполе ввода
<input type="text" id="search_words">
затем кнопку найти
<input type="button" onclick="search()">
и div где размещен текст(содержание страницы)
<div id="container">
text...........
</div>

function search(){
    var words=search_words.value
    var text=document.getElementById('container').innerHTML
    var result=text.replace(words,"<span style='background-color:Red; color:White;'>"+words+"</span>");
    document.getElementById('container').innerHTML=result;
}
смысл скрипта что он найдет в тексте container'a нужное слово или несколько слов и заменит его(их) на выделенное(ые) тэгом span который и окрасит фон в красный и сделает цвет шрифта белым

у меня работало

Последний раз редактировалось bushstas, 11.01.2010 в 16:56. Причина: http://javascript.ru/formatting
Ответить с цитированием
  #3 (permalink)  
Старый 12.01.2010, 08:19
Аватар для B@rmaley.e><e
⊞ Развернуть
Отправить личное сообщение для B@rmaley.e><e Посмотреть профиль Найти все сообщения от B@rmaley.e><e
 
Регистрация: 11.01.2010
Сообщений: 1,810

bushstas, достаточно пользователю ввести в поле поиска < или > и вся страница умрет.

Тут нужно последовательно обходить дерево, начиная с листьев — узлов, являющихся конечными и не имеющими дочерних. И двигаться вверх, к корню.
Но и это не все решение. Для каждого элемента с дочерними узлами при обработке нужно временно "выкидывать" HTML код, оставляя только обычный текст.
Ответить с цитированием
  #4 (permalink)  
Старый 12.01.2010, 10:26
жажду знаний
Отправить личное сообщение для bushstas Посмотреть профиль Найти все сообщения от bushstas
 
Регистрация: 17.07.2009
Сообщений: 202

B@rmaley.e><e,
достаточно
function check_words(){
if (event.keyCode==60 || event.keyCode==62){event.returnValue = false}
}
// а в поле ввода добавить

<input type="text" id="search_words" onkeypress="check_words()">


и пользователь просто не сможет ввести знаки < >
а если кто-то захочет вставить их копипастом то
добавить в поиск еще немножко кода

function search(){
    
    var words=search_words.value
  
    words=words.replace("<","");  // убиваем в словах поиска нежелательные символы
    words=words.replace(">","");

    var text=document.getElementById('container').innerHTML
    var result=text.replace(words,"<span style='background-color:Red; color:White;'>"+words+"</span>");
    document.getElementById('container').innerHTML=result;
}


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

а еще я тут подумал что надо будет вырезать из слов поиска и слова типа table div style и все такое которые исчезнув из HTML страницы также убьют ее, это тоже геморрой но все таки можно так сделать

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

путей наверно много и красиво-умных и коряво-простых

Последний раз редактировалось bushstas, 12.01.2010 в 10:48.
Ответить с цитированием
  #5 (permalink)  
Старый 12.01.2010, 11:24
Аватар для B@rmaley.e><e
⊞ Развернуть
Отправить личное сообщение для B@rmaley.e><e Посмотреть профиль Найти все сообщения от B@rmaley.e><e
 
Регистрация: 11.01.2010
Сообщений: 1,810

bushstas, если бы все было так просто... вводим href и страница (ссылки) снова умирает. И таких вариантов можно придумать до бесконечности.
Ответить с цитированием
  #6 (permalink)  
Старый 12.01.2010, 16:39
Аватар для Riim
Рассеянный профессор
Отправить личное сообщение для Riim Посмотреть профиль Найти все сообщения от Riim
 
Регистрация: 06.04.2009
Сообщений: 2,379

Во-первых, при использовании innerHTML создаются новые элементы, т. е. все ранее добавленные обработчики будут потеряны. Во-вторых, как уже сказал B@rmaley, в вышеприведенном варианте не учитывается ситуация когда часть искомого фрагмента содержит тег, например, ищем строку "1234" в строке "aa12<span>34</span>aa" .
Ответить с цитированием
  #7 (permalink)  
Старый 12.01.2010, 16:59
Кандидат Javascript-наук
Отправить личное сообщение для jetli13 Посмотреть профиль Найти все сообщения от jetli13
 
Регистрация: 25.11.2009
Сообщений: 109

Сегодня понималась такая же проблемка.
Обсуждение и решение (как вариант) тут
Ответить с цитированием
  #8 (permalink)  
Старый 12.01.2010, 17:41
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

CKEditor как-то ищет и подсвечивает слова, разбитые тегами надо будет посмотреть, как это сделали.
Ответить с цитированием
  #9 (permalink)  
Старый 30.07.2010, 19:03
Кандидат Javascript-наук
Отправить личное сообщение для jetli13 Посмотреть профиль Найти все сообщения от jetli13
 
Регистрация: 25.11.2009
Сообщений: 109

ни кто не знает, а есть ли какой нибудь плагин для этой задачи? Третий день пытаюсь реализовать штуку, куча подводных камней всплывает. У же заколебался, а сделать нужно ...
Ответить с цитированием
  #10 (permalink)  
Старый 02.04.2013, 06:06
Аватар для adatum.ru
Новичок на форуме
Отправить личное сообщение для adatum.ru Посмотреть профиль Найти все сообщения от adatum.ru
 
Регистрация: 02.04.2013
Сообщений: 1

Можно сделать вот так Javascript код:
<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>

Источник примера: http://adatum.ru/2013/04/01/poisk-i-...tml-stranitse/
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Checkstyle для JavaScript Alex.Kolonitsky Библиотеки/Тулкиты/Фреймворки 8 10.12.2009 12:52
нужна программа для этого. Чем писать? javascript или php? spam-server Серверные языки и технологии 3 27.08.2009 00:52
Загрузить title для ссылок на странице MarikVal jQuery 0 27.07.2009 20:38
Регулярное выражение для поиска смайлов. NightmareZ Общие вопросы Javascript 13 23.06.2009 13:12
Форма поиска Владимир Новицкий Элементы интерфейса 4 21.01.2009 02:32