Javascriptでひらがなカタカナの区別なく画面内検索したい。

#前提
googleの画面内検索のような機能を実装したいです。
今できてること

検索文字列に一致する画面内の該当箇所をハイライトする
一致した箇所が画面中央に来るようにスクロールする。

#実現したいこと
ひらがな、カタカナの区別なく検索したい。
＊例えば「さんぷる」と検索すると画面上の「サンプル」がヒットする。

#ソースコード

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  <script src="search.js" async defer></script>
54</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  var 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 scroll">${sword}</span>`);
14    });
15  }
16  );
17
18  document.querySelector('.highlight').scrollIntoView({ behavior: "smooth", block: "center" });
19});
20
21function reset() {
22  console.log('reset');
23  [...document.getElementsByClassName('highlight')].forEach(el => {
24    el.outerHTML = el.textContent;
25  });
26}

Lhankor_Mhy

2020/08/04 04:24

「サんぷル」という検索キーワードで、「さんプる」はヒットさせるのですか？

kei_m

2020/08/04 06:14

はいヒットさせます。実現したい機能としましては検索においてひらがな、カタカナの区別をなくすということですので検索対象の文字列にひらカナが混在し、検索語句にひらカナが混在していた場合でもヒットさせたいです。

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

回答1件

ベストアンサー

コメントで頂いた部分を取り込んだのとバグっていた部分を修正してみました。

javascript
1const yougo_area = document.getElementById('sample_area');
2const yougo_parts = document.getElementsByClassName('sample_part');
3const input = document.getElementById('search_word');
4
5document.getElementById("search_word").addEventListener('input', (event) => {
6    reset();
7    var sword = event.currentTarget.value; // 
8
9    console.log("original search = ", sword);
10
11    if (sword == '') { return }
12    const regexp = new RegExp(`(?<=>)[^<>]*?(.*)[^<>]*?(?=<)`, 'gi'); // タグ自体を書き換えないようにする為の正規表現
13
14    // 検索する文字列からひらがな、カタカナ表記を作る
15    let hiragana = katakanaToHiragana(sword);
16    let katakana = hiraganaToKatakana(sword);
17
18    console.log(hiragana, katakana);
19    console.log(`(${hiragana}|${katakana})`)
20    const regexp2 = new RegExp(`(${hiragana}|${katakana})`, 'gi');
21
22    [...yougo_parts].forEach(part => {
23      [regexp2].forEach(function (rex) {
24
25        part.innerHTML = part.innerHTML.replace(regexp, function (text) {
26              // console.log("replace " , text);
27              let orgText = text;
28              orgText = orgText.replace(rex, (match) => { return `<span class="highlight scroll">${match}</span>` });
29
30              return orgText;
31          });
32      });
33    });
34    
35    // chrome ではDOMの再描画を待たないと動かないようだ。
36    // 動作中にテキスト入力を行うと移動がキャンセルされる
37    setTimeout(function () {
38        let highlight = document.querySelector('.highlight');
39        if (highlight) highlight.scrollIntoView({ behavior: "smooth", block: "center" });
40    }, 0);
41  });
42  
43  function reset() {
44    console.log('reset');
45    [...document.getElementsByClassName('highlight')].forEach(el => {
46      el.outerHTML = el.textContent;
47    });
48  }
49
50  function katakanaToHiragana(str) {
51    return str.replace(/[\u30a1-\u30f6]/g, function(match) {
52		var chr = match.charCodeAt(0) - 0x60;
53		return String.fromCharCode(chr);
54	});
55  }
56
57  function hiraganaToKatakana(str) {
58	return str.replace(/[\u3041-\u3096]/g, function(match) {
59		var chr = match.charCodeAt(0) + 0x60;
60		return String.fromCharCode(chr);
61	});
62  }

投稿2020/08/03 10:45

編集2020/08/04 06:36

YakumoSaki

総合スコア2027

kei_m

2020/08/04 01:52

いただいたコードを実行してみたのですが動きませんでした。すいません変数定義の記載漏れでした。 const yougo_area = document.getElementById('sample_area'); const yougo_parts = document.getElementsByClassName('sample_part'); const input = document.getElementById('search_word'); このコードが先頭にあります。