Форум

MOT · #1 (**permalink**) 03.04.2020, 21:31

Доброго времени суток!
Есть скриптик для поиска по сайту:

<style>
@keyframes background {
0% {
background: red;
}
49% {
background: red;
}
50% {
background: yellow;
}
100% {
background: yellow;
}
}
</style>
<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='animation: background 1s linear infinite;'>"+textToFind+"</a>"); //Заменяем найденный текст ссылками с якорем;
      lastResFind=textToFind; // сохраняем фразу для поиска, чтобы в дальнейшем по ней стереть все ссылки
      window.location = '#'+textToFind;//перемещаем скрол к последнему найденному совпадению
     }
    </script>
    <body>
    <input type="text" id="text-to-find" value="">
    <input type="button" onclick="javascript: FindOnPage('text-to-find'); return false;" value="Искать"/>
    <br/><i>Введите слово или фразу для поиска.</i>
    <hr/>
<span>А</span><br>
<span>Б</span><br>
<span>В</span><br>
<span>контент</span>
</body>

Вся проблема в том, что идёт поиск только на сайте где я нахожусь. Как сделать нормальный поиск по системе сайтов не используя БД и страшный php?
P.S.Интересный баг - при вводе точки в поиск дизайн сайта ломается и выводятся точки

voraa · #2 (**permalink**) 04.04.2020, 08:35

Ну багов тут хватает не только с точкой.
Попробуйте искать латинскую букву a ))

А причина в том, что вы ищите в innerHTML, а потом его и меняете. В innerHTML попадает все, включая теги <span> в которых находится 'а', и потом заменяется.

Искать нужно в textContent каждого элемента по отдельности.
И вставку <a name...>
делать не текстовой заменой а созданием элемента

let a= document.createElement('a')
a.name='...'
parent.insertBefore(a, searchelem)

Как то так вот

Вот этот кошмар
.replace(eval("/name="+lastResFind+"/gi"),....
Надо заменить на
.replace(new RegExp("name="+lastResFind, "gi"),....

MOT · #3 (**permalink**) 04.04.2020, 20:31

Форум

Справочник

Discord чат

Курсы javascript