keyword search in page

01js-search-in-page.css

.highlight{
  background-color:yellow;
}
.hide{
  display: none;
}

02js-search-in-page.html

<input id="sample_word" placeholder="keyword" type="text">
<div id="sample_area">
  <div class="sample_part">
    <h3>サンプルテキスト</h3>
    <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
  </div>
  <div class="sample_part">
    <h3>サンプルテキスト</h3>
    <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
  </div>
  <div class="sample_part">
    <h3>サンプルテキスト</h3>
    <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
  </div>
  <div class="sample_part">
    <h3>sample text</h3>
    <p>sample textsample textsample textsample textsample textsample textsample text</p>
  </div>
</div>

03js-search-in-page.js

const yougo_area = document.getElementById('sample_area');
const yougo_parts = document.getElementsByClassName('sample_part');
const input = document.getElementById('sample_word');

input.addEventListener('input',()=>{
  reset();
  const sword = input.value;
  if(sword==''){return}
  const regexp = new RegExp(`(?<=>)[^<>]*?(${sword})[^<>]*?(?=<)`,'gi');
  const regexp2 = new RegExp(sword,'gi');
  [...yougo_parts].forEach(part=>{
    if(part.textContent.indexOf(sword)==-1){
      part.classList.add('hide');
    }else{
      part.innerHTML=part.innerHTML.replace(regexp,function(){
        return arguments[0].replace(regexp2,`<span class="highlight">${sword}</span>`);
      });
    }
  });
});

function reset(){
  console.log('reset');
  [...document.getElementsByClassName('highlight')].forEach(el=>{
    el.outerHTML=el.textContent;
  });
  [...document.getElementsByClassName('hide')].forEach(el=>{
    el.classList.remove('hide');
  });
}