Как сделать прокрутку к выделенному слову (без JQuery)?

Question

[andrei2019]

Есть локальные html файлы, куда я могу внедрять скрипт подсветки нужных слов. Следующий код работает (спасибо StalkerRED вопрос закрыт):

<?php
  session_start();
  $phrase = $_SESSION['phrase']; // Подсвечиваемая фраза

// --- begin script ---
$script = "
<script>

  function scrollReset() {
    currentElem = 0;
    positions = [];
    document.removeEventListener('keydown', searchNavigationHandler);
  }

  function myScroll(evt, direction){
    evt.preventDefault();
    if (direction === 'prev' && currentElem > 0) currentElem--;
    if (direction === 'next' && currentElem < positions.length) currentElem++;
    window.scroll({ top: positions[currentElem], behavior: 'instant' });
  }

  function searchNavigationHandler(evt) {
    key = evt.which ? evt.which : evt.keyCode;
    switch (key) {
      case 38:  myScroll(evt, 'prev');     break;
      case 40:  myScroll(evt, 'next');     break;
      case 27:  scrollReset();  break;
    }
  }

  function HighLight(phrase) {
    scrollReset();
    re = new RegExp(phrase, 'gi');
    document.body.innerHTML = document.body.innerHTML.replace(re, '<span class=highlight>'+phrase+'</span>');
    eL = document.body.innerHTML;
    positions = [...document.body.querySelectorAll('.highlight')].map(eL=>eL.offsetTop);
    document.addEventListener('keydown', searchNavigationHandler);
    window.scroll({top: positions[0], behavior: 'instant' });
  }

   window.onload = HighLight($phrase);
</script>
"; //--- end script ---

  $html            = file_get_contents($path_html_title);
  $script_html     = str_replace('</body>', $script. '</body>', $html);
  $script_html     = str_replace('</head>', '<style type="text/css">.highlight{background:orange;}</style></head>', $script_html);
  echo $script_html;
?>

Answer 1

[Stalker_RED]

Обработчики кнопок делаются так:

window.addEventListener('keypress', searchNavigationHandler)


function searchNavigationHandler(evt) {
  let key = evt.which ? evt.which : evt.keyCode;

  switch (key) {
    case 38:
      prev();
      break;
    case 40:
      next();
      break;
    case 27:
    	window.removeEventListener('keypress', searchNavigationHandler)
      break;
  }
}

jsfiddle.net/0yz37qkr

Плавный скролл так:

window.scroll({
  top: 1000, // координата якоря по высоте
  behavior: "smooth"
});

Нужная вам координата при помощи jQuery добывается легко: $(якорь).position().top
Как это сделать БЕЗ jQuery, и чтобы оно не глючило - я не знаю, но уверен вы найдете решение.

P.S.:

eval('/'+phrase+'/gi')

Поздравляем, у вас XSS и ваших посетителей уже ломают, а антивирусы и браузеры помечают ваш сайт как вредоносный. В общем с eval'ом поосторожнее, нужно тщательно фильтровать фразу.

Comments

[andrei2019]

это локальный поиск без доступа к интернет.

[andrei2019]

можно и не плавный скролл.

[Stalker_RED]

andrei2019, за плавность там отвечает ровно одна строка: behavior: "smooth"

window.location = '#'+phrase; // cкролл на первый якорь (почему-то работает только на слово, а не на фразу с пробелами :-( )

Если вы хотите скорллить через location по id или name, то следует учитывать, что

и

https://www.w3schools.com/html/html_id.asp

Еще раз:
несколько одинаковых id на странице делать НЕЛЬЗЯ. (ничего не взорвется, но и работать будет только первый).
Пробелы и прочую ерунду в id использовать НЕЛЬЗЯ. (ничего не взорвется, но будет использована только та часть, что до пробела).

[andrei2019]

Cпасибо за подробные разъяснения!
Я не собирался делать несколько одинаковых ид конечно. Но как же позиционировать к выделенной фразе с пробелами? Она же выделяется, то есть якоря устанавливаются. Заменить пробел на подчеркивание?

[Stalker_RED]

andrei2019, так?
jsfiddle.net/0yz37qkr/4
С тебя десять баксов :)

[Stalker_RED]

andrei2019, точка с запятой в js является необязательной фиговиной, и реально нужна в довольно ограниченном числе случаев.

Я делал в хроме, в мозилле могут быть другие коды клавиш (можете потестировать здесь). Мозиллы сейчас нет под рукой и еще несколько дней не будет. (накрылся один из винтов и я сейчас на почти голом компе, даже ИДЕ нет).

Про position я тоже предупреждал.
jQuery как-раз и сделан для того, чтобы код работал одинаково в разных браузерах.

[andrei2019]

Так зачем столько событий используется. Это ошибка?

[Stalker_RED]

Так у Вас keydown, keypress или input используется?!

Так зачем столько событий используется. Это ошибка?

Событий ровно два.

по событию input на текстовом поле срабатывает обработчик, который убирает старую подсветку, делает новую, и вешает обработчик keydown

этот с keydown обрабатывает две стрелки (прокрутка к предыдущей или следующей подстветке) и ескейп (снять подсветку и обработчик keydown)

keypress был в какой-то из версий, но потом я его убрал.

[Stalker_RED]

andrei2019, продолжить смогу только завтра, уехал на дачу.

[andrei2019]

Stalker_RED, cпасибо, буду разбираться. жду ответ в скайп для 10.

[andrei2019]

Stalker_RED Я потратил почти сутки непрерывной работы, чтобы разобраться в Вашем коде, но все же запустил его. Спасибо за потраченное время. Жду контакта для оплаты.

[Stalker_RED]

andrei2019,
jsfiddle.net/keof5a83/1 логику pgUp видимо придется доработать, потому что "ближайший за верхней границей вьюпорта" сейчас не отличается от prev

Складывается впечатление, что вы не совсем правильно поняли направленность этого сайта (toster.ru).
Это не биржа фрилансеров и не центр обучения. По задумке здесь люди задают вопрос и получают ответ.
Переделывать уже закрытый вопрос добавляя требования типа "а теперь сделайте мне еще вот это и вон то" не особо приветствуются.