質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

正規表現

正規表現とは特定の文字列によるパターンマッチングを行う際に用いられる宣言型プログラミングです。

検索

検索は、あるデータの集まりの中から 目的のデータを見つけ出すことです。

解決済

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

kei_m
kei_m

総合スコア4

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

正規表現

正規表現とは特定の文字列によるパターンマッチングを行う際に用いられる宣言型プログラミングです。

検索

検索は、あるデータの集まりの中から 目的のデータを見つけ出すことです。

2回答

1グッド

1クリップ

515閲覧

投稿2020/08/04 09:59

#前提
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
kamijyo👍を押しています

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

otn

2020/08/04 10:22

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

2020/08/04 10:39

はいマッチしたいです!

回答2

0

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

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

0

ベストアンサー

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));

投稿2020/08/04 10:21

yambejp

総合スコア108937

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

kei_m

2020/08/05 03:06

ありがとうございます! うまくいきました。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

正規表現

正規表現とは特定の文字列によるパターンマッチングを行う際に用いられる宣言型プログラミングです。

検索

検索は、あるデータの集まりの中から 目的のデータを見つけ出すことです。