Работа с поиском на сайте

@Shepard_1998 · Регистрация: 15.04.2017

Студворк — интернет-сервис помощи студентам

Здравствуйте. Сейчас делаю поиск на сайте, я в общем сделал, чтобы найденные результаты выделялись красным цветом, тут поиск работает как надо. Как сделать, чтобы осуществлялся переход к найденным результатам?Вот код:

Код html формы:

HTML5
1
2
3
4
5
<div id="poisk">
        <input class="place_for_search" type="text" id="text-to-find" value="" placeholder="Поиск" autofocus> 
              <input class="button_for_search" type="submit" onclick="javascript: FindOnPage('text-to-find',true); return false;" value="Поиск" title="Начать поиск">
            </form>
    </div>

Код js:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
var input,search,pr,result,result_arr, locale_HTML, result_store;
 
function func() {
    locale_HTML = document.body.innerHTML;   // сохраняем в переменную весь body (Первоначальный)
}
setTimeout(func, 1000);  //ждем подгрузки Jsona и выполняем
 
function FindOnPage(name, status) {
 
    input = document.getElementById(name).value; //получаем значение из поля в html
    
    if(input.length<3&&status==true)
    {
        alert('Для поиска вы должны ввести три или более символов');
        function FindOnPageBack() { document.body.innerHTML = locale_HTML; }
    }
    
    if(input.length>=3)
    {
        function FindOnPageGo() {
 
            search = '/'+input+'/g';  //делаем из строки регуярное выражение
            pr = document.body.innerHTML;   // сохраняем в переменную весь body
            result = pr.match(/>(.*?)</g);  //отсекаем все теги и получаем только текст
            result_arr = [];   //в этом массиве будем хранить результат работы (подсветку)
 
            var warning = true;
            for(var i=0;i<result.length;i++) {
                if(result[i].match(eval(search))!=null) {
                    warning = false;
                }
            }
            if(warning == true) {
                alert('Не найдено ни одного совпадения');
            }
 
            for(var i=0; i<result.length;i++) {
                result_arr[i] = result[i].replace(eval(search), '<span style="background-color:red;">'+input+'</span>'); //находим нужные элементы, задаем стиль и сохраняем в новый массив
            }
            for(var i=0; i<result.length;i++) {
                pr=pr.replace(result[i],result_arr[i])  //заменяем в переменной с html текст на новый из новогом ассива
            }
            document.body.innerHTML = pr;  //заменяем html код
        }
    }
    function FindOnPageBack() { document.body.innerHTML = locale_HTML; }
    if(status) { FindOnPageBack(); FindOnPageGo(); } //чистим прошлое и Выделяем найденное
    if(!status) { FindOnPageBack(); } //Снимаем выделение
}

Qwerty_Wasd · 29.05.2018, 23:31

Код где-то уже видел. На хабре - https://habr.com/sandbox/101260/.
Shepard_1998, это лишь набросок, марафет наведете сами - https://codepen.io/qwerty_wasd/pen/JZjyRZ

HTML5
1
2
3
4
5
6
7
8
<div class="wrap-module-search">
  <input class="place_for_search" id="textFind" type="text" placeholder="искомое слово - qwerty" autofocus="autofocus"/>
  <input id="btSearch" type="submit" value="Поиск" title="Начать поиск"/>
  <button id="btCancel">Отмена</button>
  <button id="btDown">▼</button>
  <button id="btUp">▲</button>
</div>
<div id="blockSearch">blablablablablablablablablablablablablablablabl ablablablablablablablablablablablablabla blablablablablablablablablablablablabla blablablablablablablablablablablablablablabla blablablablablablablablablabla blablablablablablablablablablablablablablabla  blablablablablablablablablablablablablablablablablabla  blablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla qwerty blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla qwerty blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablablablablablabl ablablablablablablablablablablablablabla blablablablablablablablablablablablabla blablablablablablablablablablablablablablabla blablablablablablablablablabla qwerty blablablablablablablablablablablablablablabla  blablablablablablablablablablablablablablablablablabla  blablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla qwerty blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla qwerty blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablablablablablabl ablablablablablablablablablablablablabla blablablablablablablablablablablablabla blablablablablablablablablablablablablablabla blablablablablablablablablabla qwerty blablablablablablablablablablablablablablabla  blablablablablablablablablablablablablablablablablabla  blablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla qwerty blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla qwerty blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablablablablablabl ablablablablablablablablablablablablabla blablablablablablablablablablablablabla blablablablablablablablablablablablablablabla blablablablablablablablablabla qwerty blablablablablablablablablablablablablablabla  blablablablablablablablablablablablablablablablablabla  blablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla qwerty blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla qwerty blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablablablablablabl ablablablablablablablablablablablablabla blablablablablablablablablablablablabla blablablablablablablablablablablablablablabla blablablablablablablablablabla qwerty blablablablablablablablablablablablablablabla  blablablablablablablablablablablablablablablablablabla  blablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla qwerty blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla qwerty blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablablablablablabl ablablablablablablablablablablablablabla blablablablablablablablablablablablabla blablablablablablablablablablablablablablabla blablablablablablablablablabla qwerty blablablablablablablablablablablablablablabla  blablablablablablablablablablablablablablablablablabla  blablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla qwerty blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla qwerty blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablablablablablabl ablablablablablablablablablablablablabla blablablablablablablablablablablablabla blablablablablablablablablablablablablablabla blablablablablablablablablabla qwerty blablablablablablablablablablablablablablabla  blablablablablablablablablablablablablablablablablabla  blablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla qwerty blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla qwerty blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablablablablablabl ablablablablablablablablablablablablabla blablablablablablablablablablablablabla blablablablablablablablablablablablablablabla blablablablablablablablablabla qwerty blablablablablablablablablablablablablablabla  blablablablablablablablablablablablablablablablablabla  blablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla qwerty blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla qwerty blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla blablablablablablablablablablablabla</div>

CSS
1
2
.wrap-module-search{position:fixed;top:0;background:red;width:100vw;text-align:center}
#blockSearch{margin-top:30px}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
//тренировочное слово qwerty и его составляющие(qwe,qwer,qwert,wer,wert,werty и т.д.), так как остальное набор трех букв
//искомое слово по переходу будет с желтым фоном
let tmpText = blockSearch.innerHTML, arrAncorsSpan,i=0,
    //ф-я поиска
    searchWords = function(){
      blockSearch.innerHTML=tmpText;
      if (textFind.value.length<3) alert('Для поиска вы должны ввести три или более символов');
      else {
        blockSearch.innerHTML=blockSearch.innerHTML.replaceAll(textFind.value,`<span class="anchors" style="background:red">${textFind.value}</span>`);
        arrAncorsSpan=document.getElementsByClassName('anchors')}},
    //ф-я отмены
    unsetWords = function(){blockSearch.innerHTML=tmpText;i=0},
    //ф-я перехода вниз
    searchDown = function(){
      if(i>=0 && i<arrAncorsSpan.length) {
        window.scrollTo(arrAncorsSpan[i].offsetLeft-50,arrAncorsSpan[i].offsetTop-50);
        arrAncorsSpan[i].style="background:yellow";
        if(i>0) arrAncorsSpan[i-1].style="background:red"; i++}},
    //ф-я перехода вверх
    searchUp = function(){
      if(i>0 && i<=arrAncorsSpan.length) {
        i--;    
        window.scrollTo(arrAncorsSpan[i].offsetLeft-50,arrAncorsSpan[i].offsetTop-50);
        arrAncorsSpan[i].style="background:yellow";
        if(i<arrAncorsSpan.length) arrAncorsSpan[i+1].style="background:red"}}
//replase почему-то не принял regex????? Codepen???
String.prototype.replaceAll = function(search, replacement) {
  var target = this;
  return target.split(search).join(replacement)}
//Обработчики событий
//поиск и выделение
btSearch.addEventListener('click',searchWords);
//снятие выделения
btCancel.addEventListener('click',unsetWords);
//переходы по искомому
//вниз
btDown.addEventListener('click',searchDown);
//вверх
btUp.addEventListener('click',searchUp);
//перед уходом выключим свет
window.addEventListener('unload',function(){
  arrAncorsSpan=i=undefined;
  btSearch.removeEventListener('click',searchWords);
  btCancel.removeEventListener('click',unsetWords);
  btDown.removeEventListener('click',searchDown);
  btUp.removeEventListener('click',searchUp);
});

Новые блоги и статьи Все статьи Все блоги /
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .