ページ内画面検索でヒットした文字列を画面中央にスクロールさせたい。

前提・実現したいこと

ページ内画面検索を行いたいです。
イメージとしてはgoogleの画面検索です(command+F)。

「具体的に実現したいこと」
１検索語句にヒットした文字列にハイライトをつける

２ヒットした文字列を画面中央にスクロールさせる。
複数文字列がヒットした場合は一番最初の文字列を中央に。
＊画面中央より上部にヒットした文字列がある場合はハイライトのみ

「今実現できていること」
~~１検索語句にヒットした文字列にハイライトをつける
~~

###「質問したいこと」
ヒットした文字列を画面中央にスクロールさせるにはどうすれば良いのか。

該当のソースコード

html
1<body>
2  <input id="search_word" placeholder="keyword" type="text">
3  <div id="sample_area">
4    <div class="sample_part">
5      <h3>サンプルテキスト</h3>
6      <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
7    </div>
8    <div class="sample_part">
9      <h3>サンプルテキスト</h3>
10      <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
11    </div>
12    <div class="sample_part">
13      <h3>サンプルテキスト</h3>
14      <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
15    </div>
16    <div class="sample_part">
17      <h3>sample text</h3>
18      <p>sample textsample textsample textsample textsample textsample textsample text</p>
19    </div>
20    <div class="sample_part">
21      <h3>あああああ</h3>
22      <p>ああああああああああああああああああああああああああああああああああああ</p>
23    </div>
24    <div class="sample_part">
25      <h3>いいいいい</h3>
26      <p>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</p>
27    </div>
28    <div class="sample_part">
29      <h3>うううううう</h3>
30      <p>うううううううううううううううううううううううううううううううううう</p>
31    </div>
32    <div class="sample_part">
33      <h3>ええええええ</h3>
34      <p>ええええええええええええええええええええええええええええええええええ</p>
35    </div>
36    <div class="sample_part">
37      <h3>おおおおお</h3>
38      <p>おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお</p>
39    </div>
40    <div class="sample_part">
41      <h3>sample text</h3>
42      <p>sample textsample textsample textsample textsample textsample textsample text</p>
43    </div>
44    <div class="sample_part">
45      <h3>sample text</h3>
46      <p>sample textsample textsample textsample textsample textsample textsample text</p>
47    </div>
48    <div class="sample_part">
49      <h3>sample text</h3>
50      <p>sample textsample textsample textsample textsample textsample textsample text</p>
51    </div>
52  </div>
53</body>

css
1.highlight{
2  background-color:yellow;
3}

JS
1const yougo_area = document.getElementById('sample_area');
2const yougo_parts = document.getElementsByClassName('sample_part');
3const input = document.getElementById('search_word');
4
5input.addEventListener('input', () => {
6  reset();
7  const sword = input.value;
8  if (sword == '') { return }
9  const regexp = new RegExp(`(?<=>)[^<>]*?(${sword})[^<>]*?(?=<)`, 'gi');
10  const regexp2 = new RegExp(sword, 'gi');
11  [...yougo_parts].forEach(part => {
12    part.innerHTML = part.innerHTML.replace(regexp, function () {
13      return arguments[0].replace(regexp2, `<span class="highlight">${sword}</span>`);
14    });
15  }
16  );
17
18});
19
20function reset() {
21  console.log('reset');
22  [...document.getElementsByClassName('highlight')].forEach(el => {
23    el.outerHTML = el.textContent;
24  });
25}

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。
これでいかがでしょうか。

js
1input.addEventListener('input', () => {
2
3//...
4
5  document.querySelector('.highlight').scrollIntoView({behavior: "smooth", block: "center"});
6});
7
8input.addEventListener('change', () => {
9  document.querySelector('.highlight').scrollIntoView({behavior: "smooth", block: "center"});
10});