Javascript.RU

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

Поиск слова на странице (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 (textToFind.length < 2) {
                 alert("Слишком короткий текст")
                 return;
             }

             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:yellow; font-size:15px'>" + textToFind + "</a>"); //Заменяем найденный текст ссылками с якорем;
             lastResFind = textToFind; // сохраняем фразу для поиска, чтобы в дальнейшем по ней стереть все ссылки
             window.location = '#' + textToFind;//перемещаем скрол к последнему найденному совпадению

         }
    </script>
Ответить с цитированием
  #2 (permalink)  
Старый 15.08.2013, 09:55
Новичок на форуме
Отправить личное сообщение для Корделия Посмотреть профиль Найти все сообщения от Корделия
 
Регистрация: 15.08.2013
Сообщений: 5

для поля ввода

<input type="text" id="text-to-find" value="">
<input type="button" onclick="javascript: FindOnPage('text-to-find'); return false;" value="Искать"/>
Ответить с цитированием
  #3 (permalink)  
Старый 15.08.2013, 10:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,023

Корделия,
jQuery highlight plugin — подсветка слов в тексте
Ответить с цитированием
  #4 (permalink)  
Старый 15.08.2013, 12:54
Новичок на форуме
Отправить личное сообщение для Корделия Посмотреть профиль Найти все сообщения от Корделия
 
Регистрация: 15.08.2013
Сообщений: 5

В том что Вы прислали не реализовано то что как раз я не могу найти как сделать..перехода по вхождениям нет...и выделения не убираются если не перегрузить страницу(((
Ответить с цитированием
  #5 (permalink)  
Старый 15.08.2013, 13:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,023

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

Это работа, и за нее обычно платят деньги.
Для таких сообщений предназначен раздел форума "Работа".

Если вы все же хотите, чтобы вам помогли - приложите какие-то усилия сами и задавайте вопросы по ходу дела.
Ответить с цитированием
  #6 (permalink)  
Старый 15.08.2013, 13:21
Новичок на форуме
Отправить личное сообщение для Корделия Посмотреть профиль Найти все сообщения от Корделия
 
Регистрация: 15.08.2013
Сообщений: 5

Это не работа с нуля потому что явно здесь просто добавляется пара строк. А так как я человек, который впервые вообще с подобным столкнулся я не могу сообразить что это за пара строк, иначе тут бы и не писала. Не могли бы вы пояснить, что значит убрать шаблон поиска?
Ответить с цитированием
  #7 (permalink)  
Старый 15.08.2013, 14:57
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 2,928

Вот, за полчаса тут написал, возиться долго не хочу, поэтому улучшайте сами.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ без названия</title>
<style type="text/css">
.wordSelected {
	background: #066;
	border: 1px solid #F30;
	color: #FFF;
}
.wordFocused {
	background: #FFF;
}
</style>
</head>

<body>
<div id="myText">«Меня зашвыривают внутрь. Успеваю увидеть стол, на котором лежит здоровенный продолговатый пакет на застежке – старший вожатый тут же его загораживает, кучу инструментов, нашего доктора с лицом таким усталым и брезгливым, что молодость ему не идет, и раму с дверной ручкой на окне».<br />
«Меня зашвыривают внутрь. Успеваю увидеть стол, на котором лежит здоровенный продолговатый пакет на застежке – старший вожатый тут же его загораживает, кучу инструментов, нашего доктора с лицом таким усталым и брезгливым, что молодость ему не идет, и раму с дверной ручкой на окне».</div>

<input type="button" onclick="Word.selected('стол', 'myText')" value="Найти 'стол'" />
<input type="button" onclick="Word.deleted()" value="Удалить выделения" />
<input type="button" onclick="Word.focused()" value="Focus +" />

<script type="text/javascript">
var Word = {
	selected: function(word, where, del) {
		where = typeof where == 'string' ? document.getElementById(where) : where || console.log('Error');
		if(!where) return;
		where.innerHTML = ' '+where.innerHTML.replace(new RegExp('[^a-zа-яё_-]' + word + '[^a-zа-яё_-]', 'gim'), '<span class="wordSelected">' + ' ' + word + ' ' + '</span>');
		
	},
	deleted: function() {
		var elems = document.getElementsByClassName('wordSelected');
		for(var i=elems.length-1; i>=0; i--) elems[i].outerHTML = ' '+elems[i].innerHTML+' ';
	},
	focused: function() {
		var elems = document.getElementsByClassName('wordSelected');
		if(!elems[0]) return;
		if(elems[this.focusIndex]) elems[this.focusIndex].classList.remove('wordFocused');
		if(elems[++this.focusIndex]) elems[this.focusIndex].classList.add('wordFocused');
		else {
			this.focusIndex = -1;
			this.focused();
		}
	},
	focusIndex: -1
}
</script>
</body>
</html>
Ответить с цитированием
  #8 (permalink)  
Старый 15.08.2013, 15:29
Новичок на форуме
Отправить личное сообщение для Корделия Посмотреть профиль Найти все сообщения от Корделия
 
Регистрация: 15.08.2013
Сообщений: 5

Спасибо огромное приогромное))буду разбиратся
Ответить с цитированием
  #9 (permalink)  
Старый 15.08.2013, 16:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,023

Ruslan_xDD,
а run в тег html ? а множественное выделение выделение одного и тогоже?а белое на белом ?
Ответить с цитированием
  #10 (permalink)  
Старый 15.08.2013, 16:44
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 2,928

рони, это так, наброски. Дорабатывать конечно много чего нужно. Насчёт HTML Run, то он у меня никогда не срабатывает, попросту вся страница перестаёт работать, поэтому я им не пользуюсь.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Поиск слова на странице kumar6346 Events/DOM/Window 1 28.05.2011 23:09
Последние книги по JavaScript! monolithed Учебные материалы 7 26.10.2010 18:40
Выдвет ошибку JavaScript Ромио Opera, Safari и др. 4 21.10.2010 19:34
Поиск последнего слова в строке AlexFadeev Элементы интерфейса 3 01.04.2010 17:56
Поиск в массиве через JavaScript Noran Общие вопросы Javascript 0 10.08.2008 16:31