Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.11.2017, 11:08
Аватар для JAMLIGHT
Аспирант
Отправить личное сообщение для JAMLIGHT Посмотреть профиль Найти все сообщения от JAMLIGHT
 
Регистрация: 23.01.2017
Сообщений: 80

модифицировать скрипт поиска
данный код рассматривался не раз на данном сайте,однако решения небыло найдено.Задача-модифицировать скрипт поиска таким образом ,чтобы поиск происходил только по тексту контента страницы,например только в тегах h1 или p.В данном скрипте ниже наблюдается поломка кода HTML,содержащего текст,например ломаются атрибуты title и alt картинок на странице в своих текстовых значениях.
<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;

  if (textToFind.length < 3) {
    alert("Введите не менее 3-х символов!");
    return;
  }
  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:grey'>"+textToFind+"</a>"); //Заменяем найденный текст ссылками с якорем;
  lastResFind=textToFind; // сохраняем фразу для поиска, чтобы в дальнейшем по ней стереть все ссылки
  window.location = '#'+textToFind;//перемещаем скрол к последнему найденному совпадению
 } 
</script>
<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/>

Последний раз редактировалось JAMLIGHT, 04.11.2017 в 11:33.
Ответить с цитированием
  #2 (permalink)  
Старый 05.11.2017, 12:26
Аватар для JAMLIGHT
Аспирант
Отправить личное сообщение для JAMLIGHT Посмотреть профиль Найти все сообщения от JAMLIGHT
 
Регистрация: 23.01.2017
Сообщений: 80

Если document.body заменить на document.getElementById("") тогда возвращает только один элемент, т.к. id должен быть уникален.Если подставить document.querySelectorAll('.one') то почему то не работает.Где ошибка?
<!doctype html>
<html>
<head>
<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.querySelectorAll('.one').innerHTML.indexOf(textToFind)=="-1")
  alert("Ничего не найдено, проверьте правильность ввода!");
  
  if(copy_page.length>0)
        document.querySelectorAll('.one').innerHTML=copy_page;
  else copy_page=document.querySelectorAll('.one').innerHTML;

  if (textToFind.length < 3) {
    alert("Введите не менее 3-х символов!");
    return;
  }
  document.querySelectorAll('.one').innerHTML = document.querySelectorAll('.one').innerHTML.replace(eval("/name="+lastResFind+"/gi")," ");//стираем предыдущие якори для скрола
  document.querySelectorAll('.one').innerHTML = document.querySelectorAll('.one').innerHTML.replace(eval("/"+textToFind+"/gi"),"<a name="+textToFind+" style='background:grey'>"+textToFind+"</a>"); //Заменяем найденный текст ссылками с якорем;
  lastResFind=textToFind; // сохраняем фразу для поиска, чтобы в дальнейшем по ней стереть все ссылки
  window.location = '#'+textToFind;//перемещаем скрол к последнему найденному совпадению
 } 
</script>
</head>
<body>


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


      <p class="one">
      text1 content content content content content content content content  content content content content content content content content content
      </p>
      <p class="one">
      text2 content content content content content content content content  content content content content content content content content content
      </p>
      <p class="one">
      text3 content content content content content content content content  content content content content content content content content content
      </p>
      <p class="one">
      text4 content content content content content content content content  content content content content content content content content content
      </p>      

</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 05.11.2017, 12:45
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Сообщение от JAMLIGHT
Где ошибка
querySelectorAll() возвращает объект типа NodeList, у которого нет метода innerHTML.
Ответить с цитированием
  #4 (permalink)  
Старый 05.11.2017, 12:51
Аватар для JAMLIGHT
Аспирант
Отправить личное сообщение для JAMLIGHT Посмотреть профиль Найти все сообщения от JAMLIGHT
 
Регистрация: 23.01.2017
Сообщений: 80

окей, что делать? Как сделать выборку? пробовал getElementsByClassName() тоже не работает и тоже возвращает обьект типа NodeList.Какие варианты?

Последний раз редактировалось JAMLIGHT, 05.11.2017 в 13:01.
Ответить с цитированием
  #5 (permalink)  
Старый 05.11.2017, 13:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

Сообщение от laimas
Какие варианты?
цикл по списку элементов
Ответить с цитированием
  #6 (permalink)  
Старый 05.11.2017, 13:08
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Сообщение от JAMLIGHT
что делать?
https://developer.mozilla.org/ru/docs/Web/API/NodeList
Ответить с цитированием
  #7 (permalink)  
Старый 05.11.2017, 15:16
Аватар для JAMLIGHT
Аспирант
Отправить личное сообщение для JAMLIGHT Посмотреть профиль Найти все сообщения от JAMLIGHT
 
Регистрация: 23.01.2017
Сообщений: 80

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

Последний раз редактировалось JAMLIGHT, 05.11.2017 в 15:31.
Ответить с цитированием
  #8 (permalink)  
Старый 05.11.2017, 15:27
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Сообщение от JAMLIGHT
не имею опыта перебирать в цикле.Могу найти только по индексу
Ну так итератор цикла и будет индексом элемента в наборе, используйте цикл for.
Ответить с цитированием
  #9 (permalink)  
Старый 05.11.2017, 16:32
Аватар для JAMLIGHT
Аспирант
Отправить личное сообщение для JAMLIGHT Посмотреть профиль Найти все сообщения от JAMLIGHT
 
Регистрация: 23.01.2017
Сообщений: 80

перебрал, нашёл ,что дальше?
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div>
        <h3>p теги с текстом</h3>
        <p>Первый абзац</p>
        <p>Второй абзац</p>
    </div>
<script>
var pElements = document.getElementsByTagName("p");
 
for (var i = 0; i < pElements.length; i++) {
    alert("Текст параграфа: " + pElements[i].innerText + " нашёл");
}
</script>
</body>
</html>
Ответить с цитированием
  #10 (permalink)  
Старый 05.11.2017, 18:39
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Сообщение от JAMLIGHT
что дальше?
А чего надо? Вы пытались вставить в коллекцию, теперь знаете как. Только хотя innerText и поддерживается теперь не только IE, это свойство не считается стандартным и будет ли таковым не известно. Лучше не его использовать, а textContent.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Написать Ява скрипт Kavan Events/DOM/Window 2 20.05.2017 08:25
Куплю скрипт nbspwka Работа 2 06.02.2017 09:40
Модифицировать скрипт для работы с несколькими формами на одной странице javascript_pupil Общие вопросы Javascript 8 30.01.2017 12:53
как скопировать скрипт с переадресующей страници ramisa Элементы интерфейса 9 09.07.2013 23:59
добавление окошка в скрипт подсчета слов Гость Общие вопросы Javascript 10 11.03.2008 17:07