jsの正規表現で文字を分割したい

#前提
JavaScriptで画面内検索を行おうとしています。
ヒットした文字列にはハイライトを付け、画面中央にスクロールさせます。
具体的にはchromeの画面内検索をイメージしています。
そこでひらがな、カタカナどちらで検索してもヒットさせたいです。

#問題
例えば文字列「さんプルてきスト」
に対して検索ワード「サンプル」で検索しようとするとヒットしない。

#質問したいこと
JavaScriptのRegExpを用いて検索語句に正規表現を適用する際に、一文字ごとに文字分割をしたい。
例えば「サンプル」で検索した場合、 (さんぷる|サンプル) という正規表現になるすが、これを
(さ|サ)(ん|ン)(ぷ|プ)(る|ル) になるように文字を分割したい。
具体的にはJavaScriptの変数regexp2です。

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_parts = document.getElementsByClassName('sample_part');
2const input = document.getElementById('search_word');
3
4document.getElementById("search_word").addEventListener('input', (event) => {
5  reset();
6  var sword = event.currentTarget.value; //
7
8  console.log("original search = ", sword);
9
10  if (sword == '') { return }
11  const regexp = new RegExp(`(?<=>)[^<>]*?(.*)[^<>]*?(?=<)`, 'gi'); // タグ自体を書き換えないようにする為の正規表現
12
13  // 検索する文字列からひらがな、カタカナ表記を作る
14  let hiragana = katakanaToHiragana(sword);
15  let katakana = hiraganaToKatakana(sword);
16  const regexp2 = new RegExp(`(${hiragana}|${katakana})`, 'gi');//←ここ！！
17
18  [...yougo_parts].forEach(part => {
19    [regexp2].forEach(function (rex) {
20      part.innerHTML = part.innerHTML.replace(regexp, function (text) {
21        let orgText = text;
22        orgText = orgText.replace(rex, (match) => { return `<span class="highlight scroll">${match}</span>` });
23        return orgText;
24      });
25    });
26  });
27
28  setTimeout(function () {
29    let highlight = document.querySelector('.highlight');
30    if (highlight) highlight.scrollIntoView({ behavior: "smooth", block: "center" });
31  }, 0);
32});
33
34function reset() {
35  console.log('reset');
36  [...document.getElementsByClassName('highlight')].forEach(el => {
37    el.outerHTML = el.textContent;
38  });
39}
40
41function katakanaToHiragana(str) {
42  return str.replace(/[\u30a1-\u30f6]/g, function (match) {
43    var chr = match.charCodeAt(0) - 0x60;
44    return String.fromCharCode(chr);
45  });
46}
47
48function hiraganaToKatakana(str) {
49  return str.replace(/[\u3041-\u3096]/g, function (match) {
50    var chr = match.charCodeAt(0) + 0x60;
51    return String.fromCharCode(chr);
52  });
53}
54

otn

2020/08/04 10:22

「サんプる」とかにもマッチしたいのでしょうか？

kei_m

2020/08/04 10:39

はいマッチしたいです！

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

回答2件

Javascript
1let h_array = katakanaToHiragana(sword).split('');
2let k_array = hiraganaToKatakana(sword).split('');
3let reg_text = '';
4for(let i = 0; i < h_array.length; i++) {
5	reg_text += '(' + h_array[i] + '|' + k_array[i] + ')';
6}
7const regexp2 = new RegExp(reg_text, 'gi');

単純に分割してORをつけて結合しているだけですが

投稿2021/10/03 09:05

kamijyo

総合スコア10

ベストアンサー

javascript
1var org="さんぷる,サンプル";
2var tmp;
3var reg=new RegExp((tmp=org.split(","))[0].split(/\B/).map((x,y)=>`(${x}|${tmp[1][y]})`).join(""));
4var str="さんプルてきスト";
5console.log(str.match(reg));