Мне нужно создать поиск по тексту

Question

Есть небольшой набросок JS кода, но дальше уперся и не понимаю как дальше, изменял его много раз, но от решения я всё ещё далеко. Как мне при помощи регулярных, сделать поиск в p, чтобы при нажатии на поиск, совпадения выделялись жирным, все совпадения, даже если например введу в поиск букву a оно выдаст даже те слова которые просто начинаются на нее.

const form = document.querySelector('.testForm');
const search1 = document.querySelector('#search1');
const text = document.querySelector('.text');
const locale_HTML = document.body.innerHTML;

form.addEventListener('submit', function(e) {
  e.preventDefault();
  let text1 = text.value;
  let search = search1.value;
  let reg = new RegExp('search', 'g');
  let s = text1.replace(reg, '*')
  console.log(s)
});

<form action="" class="testForm">
  <label for="search">Поиск: <input type="text" name="search" id="search1"></label><br>
  <button>Start</button><br>
  <label for="igreg"><input type="checkbox" name="igreg" id="igreg">Игнорировать регистр</label><br>
  <label for="sov"><input type="checkbox" name="sov" id="sov">Точное совпадение</label>
</form>
<hr>
<p class="text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium, debitis? Corrupti, illo aliquam, expedita enim veritatis inventore ut autem cupiditate, non quisquam aut nesciunt provident nemo ab laboriosam officiis voluptatem rem eum quae quos
  sed ullam. Minus velit minima id expedita aut fugiat obcaecati dicta! Odio et porro animi dolorem ratione aspernatur ducimus quas unde doloremque consequuntur, assumenda neque nihil qui molestiae nam, itaque laborum vitae. Hic dolor qui quo eaque tempora
  asperiores optio debitis sit ex aliquid. Laudantium itaque ipsum, culpa amet eos facilis. Aperiam nostrum, aut tempora corporis temporibus molestias eaque quaerat totam ullam quas odio. Ratione animi labore inventore temporibus, corrupti in nisi commodi
  maiores doloribus. Earum, animi dolorem amet, sint vero quos corporis provident veritatis aperiam repellat odit beatae reprehenderit suscipit ut nulla. Laboriosam, quas ut? Assumenda dolorum adipisci consequuntur, quis voluptas expedita pariatur cupiditate
  illo ipsum nam repellendus, aliquid dignissimos harum. Doloremque, iure inventore reiciendis ea voluptatem in recusandae accusantium. Quod, amet. Ipsum inventore iure ea pariatur provident enim, perferendis dolorum ullam libero impedit culpa qui recusandae
  amet alias! Repellendus esse, assumenda sapiente aliquid excepturi deserunt quod possimus voluptate sint officia magnam, ducimus eligendi iure tenetur labore recusandae error repellat praesentium omnis, earum fuga doloribus? Error et eligendi odio!
  Suscipit ratione soluta culpa, consequatur ea necessitatibus, totam vero facere fuga, nam repellendus! Velit ea modi explicabo totam reiciendis. Nostrum, accusantium. Nisi adipisci enim officia beatae alias nihil, deserunt quis repudiandae non totam
  eum quia. Quidem nulla illo laborum veritatis assumenda sequi harum laudantium nobis atque nisi modi ipsam corrupti, unde veniam saepe, reiciendis quisquam incidunt numquam dolorem. Mollitia impedit, ratione error accusantium vel enim eligendi cupiditate
  ex aliquid dolorum ad modi, iusto delectus autem! Optio quo ipsam id quod, aspernatur unde assumenda atque cumque doloremque accusamus alias facere. Rerum, eveniet. Sequi, vero. Quia, veritatis repellat.</p>

Answer 1

Немного подправил. Далее можете стилизовать выделение на свой вкус:

const form = document.querySelector('.testForm');
const search1 = document.querySelector('#search1');
const text = document.querySelector('.text');
const hl = document.querySelector('.hl');

form.addEventListener('input', function(e) {
  let search = search1.value.replace(/([\[\\\^\$\.\|\?\*\+\(\)])/g, '\\$1');
  let sTxt = text.innerText;
  hl.innerHTML = sTxt;
  if (!search) {
    return
  }
  let rExp = new RegExp(((sov.checked) ? '(^|[^а-яёА-ЯЁ\\w])(' + search + ')([^а-яёА-ЯЁ\\w]|$)' : '(^|[\\s\\S])(' + search + ')([\\s\\S]|$)'), 'gm' + ((igreg.checked) ? 'i' : ''));
  hl.innerHTML = sTxt.replace(rExp, '$1<mark class="f">$2</mark>$3');
});

.wrap { position: relative; }

.hl {
  position: absolute;
  top: 0; left: 0; z-index: -1;
  color: #0000;
}
.hl, .text { margin: 0; }
.f { background-color: #fa0; }

<body>
  <form action="" class="testForm">
    <label for="search">Поиск: <input type="text" name="search" id="search1"></label><br>
    <label for="igreg"><input type="checkbox" name="igreg" id="igreg">Игнорировать регистр</label><br>
    <label for="sov"><input type="checkbox" name="sov" id="sov">Точное совпадение</label>
  </form>
  <hr>
  <div class="wrap">
    <p class="hl"></p>
    <p class="text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium, debitis? Corrupti, illo aliquam, expedita enim veritatis inventore ut autem cupiditate, non quisquam aut nesciunt provident nemo ab laboriosam officiis voluptatem rem eum quae
      quos sed ullam. Minus velit minima id expedita aut fugiat obcaecati dicta! Odio et porro animi dolorem ratione aspernatur ducimus quas unde doloremque consequuntur, assumenda neque nihil qui molestiae nam, itaque laborum vitae. Hic dolor qui quo
      eaque tempora asperiores optio debitis sit ex aliquid. +Laudantium itaque ipsum, culpa amet eos facilis. Aperiam nostrum, aut tempora corporis temporibus molestias eaque quaerat totam ullam quas odio. Ratione animi labore inventore temporibus, corrupti
      in nisi commodi maiores doloribus. Earum, animi dolorem amet, sint vero quos corporis provident veritatis aperiam repellat odit beatae reprehenderit suscipit ut nulla. Laboriosam, quas ut? Assumenda dolorum adipisci consequuntur, quis voluptas expedita
      pariatur cupiditate illo ipsum nam repellendus, aliquid dignissimos harum. Doloremque, iure inventore reiciendis ea voluptatem in recusandae accusantium. Quod, amet. Ipsum inventore iure ea pariatur provident enim, perferendis dolorum ullam libero
      impedit culpa qui recusandae amet alias! Repellendus esse, assumenda sapiente aliquid excepturi deserunt quod possimus voluptate sint officia magnam, ducimus eligendi iure tenetur labore recusandae error repellat praesentium omnis, earum fuga doloribus?
      Error et eligendi odio! Suscipit ratione soluta culpa, consequatur ea necessitatibus, totam vero facere fuga, nam repellendus! Velit ea modi explicabo totam reiciendis. Nostrum, accusantium. Nisi adipisci enim officia beatae alias nihil, deserunt
      quis repudiandae non totam eum quia. Quidem nulla illo laborum veritatis assumenda sequi harum laudantium nobis atque nisi modi ipsam corrupti, unde veniam saepe, reiciendis quisquam incidunt numquam dolorem. Mollitia impedit, ratione error accusantium
      vel enim eligendi cupiditate ex aliquid dolorum ad modi, iusto delectus autem! Optio quo ipsam id quod, aspernatur unde assumenda atque cumque doloremque accusamus alias facere. Rerum, eveniet. Sequi, vero. Quia, veritatis repellat.</p>
  </div>
</body>

БЛОГ НА HUSL

Мне нужно создать поиск по тексту

Ответы (1 шт):