Помогите исправить проблему некорректного поиска

Рейтинг: 0Ответов: 1Опубликовано: 17.08.2023

Пытаюсь сделать выделение текста при помощи библиотеки "https://github.com/mburakerman/hrjs". Проблема заключается в том, что при вводе в поиск к примеру число "2" то это ломает страницу (Я получаю вместо How are you - '2 class="">How are you'). Не могу понять почему и как это исправить. вот код:

let sr = document.getElementById('search');
let btn = document.getElementById('btn');
let clear = document.getElementById("clear");

let highlightColor = 'orange';
let backgroundColor = 'yellow';

btn.addEventListener('click', function() {
  let result = sr.value.trim();
  
  let hr = new HR(".mytext", {
    highlight: result ? result : null,
    backgroundColor: result ? highlightColor : backgroundColor
  });
  
  hr.hr();
});

sr.addEventListener('keypress', function(event) {
  if (event.keyCode === 13) {
    event.preventDefault();
    btn.click();
  }
});

clear.addEventListener('click', function() {
  document.querySelectorAll(".mytext span").forEach(function(element) {
    element.outerHTML = element.innerHTML;
  });
  
  sr.value = '';
});
<script src="https://unpkg.com/hrjs"></script>
<input type="search" name="" id="search">
<button id="btn">write</button>
<button id="clear">clear</button>
<div class="mytext">
  <p class="">hello world</p>
  <h2 class="">How are you</h2>
  <ul> 
    <li>1</li>
    <li>2</li>
  </ul> 
</div>

javascript html
Источник: Stack Overflow на русском

Ответы

▲ 0

при вводе в поиск к примеру число "2" то это ломает страницу (Я получаю вместо How are you - '2 class="">How are you'). Не могу понять почему и как это исправить

Как я понял по описанию этой приблуды (hrjs) - она не работает с вложениями. Тебе нужно правильно расставить классы у обрабатываемых элементов.

Например как в моем примере

let sr = document.getElementById('search');
let btn = document.getElementById('btn');
let clear = document.getElementById("clear");

let highlightColor = 'orange';
let backgroundColor = 'yellow';

btn.addEventListener('click', function() {
  let result = sr.value.trim();
  
  let hr = new HR(".mytext", {
    highlight: result ? result : null,
    backgroundColor: result ? highlightColor : backgroundColor
  });
  
  hr.hr();
});

sr.addEventListener('keypress', function(event) {
  if (event.keyCode === 13) {
    event.preventDefault();
    btn.click();
  }
});

clear.addEventListener('click', function() {
  document.querySelectorAll(".mytext span").forEach(function(element) {
    element.outerHTML = element.innerHTML;
  });
  
  sr.value = '';
});
<script src="https://unpkg.com/hrjs"></script>
<input type="search" name="" id="search">
<button id="btn">write</button>
<button id="clear">clear</button>
<!-- тут убрал --->
<div>
  <p class="mytext">hello world</p>
  <h2 class="mytext">How are you</h2>
  <ul> 
    <!--- тут добавил --->
    <li class="mytext">1</li>
    <li class="mytext">2</li>
  </ul> 
</div>