#前提
JavaScriptで画面内検索を行おうとしています。
ヒットした文字列にはハイライトを付け、画面中央にスクロールさせます。
具体的にはchromeの画面内検索をイメージしています。
そこでひらがな、カタカナどちらで検索してもヒットさせたいです。
#問題
Chromeでは正常に動くのですがsafariではエラーが出てしまい動きません。
具体的には正規表現でエラーが出てしまいます。
#エラー文
SyntaxError: Invalid regular expression: invalid group specifier name
RegExp-search.js:12
(anonymous関数)-search.js:12
#質問したいこと
Chromeとsafari両方のブラウザに対応した正規表現にするにはどうすれば良いか。
*正規表現を全般的に確認していただけると嬉しいです。
#ソースコード
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="search4.js" async defer></script> 54</body>
css
1.highlight{ 2 background-color:yellow; 3} 4
js
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('change', (event) => { 6 reset(); 7 var sword = event.currentTarget.value; 8 9 if (sword == '') { return } 10 const regexp = new RegExp(`(?<=>)[^<>]*?(.*)[^<>]*?(?=<)`, 'gi'); // タグ自体を書き換えないようにする為の正規表現 11 12 // 検索する文字列からひらがな、カタカナ表記を作る 13 let hiragana = katakanaToHiragana(sword); 14 let katakana = hiraganaToKatakana(sword); 15 16 const regexp2 = new RegExp(`(${hiragana}|${katakana})`, 'gi'); 17 var org = hiragana + "," + katakana; 18 var tmp; 19 var reg = new RegExp((tmp = org.split(","))[0].split(/\B/).map((x, y) => `(${x}|${tmp[1][y]})`).join("")); 20 21 [...yougo_parts].forEach(part => { 22 [reg].forEach(function (rex) { 23 part.innerHTML = part.innerHTML.replace(regexp, function (text) { 24 let orgText = text; 25 orgText = orgText.replace(rex, (match) => { return `<span class="highlight scroll">${match}</span>` }); 26 return orgText; 27 }); 28 }); 29 }); 30 31 setTimeout(function () { 32 let highlight = document.querySelector('.highlight'); 33 if (highlight) highlight.scrollIntoView({ behavior: "smooth", block: "center" }); 34 }, 0); 35}); 36 37function reset() { 38 console.log('reset'); 39 [...document.getElementsByClassName('highlight')].forEach(el => { 40 el.outerHTML = el.textContent; 41 }); 42} 43 44function katakanaToHiragana(str) { 45 return str.replace(/[\u30a1-\u30f6]/g, function (match) { 46 var chr = match.charCodeAt(0) - 0x60; 47 return String.fromCharCode(chr); 48 }); 49} 50 51function hiraganaToKatakana(str) { 52 return str.replace(/[\u3041-\u3096]/g, function (match) { 53 var chr = match.charCodeAt(0) + 0x60; 54 return String.fromCharCode(chr); 55 }); 56} 57
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/08/05 04:33
2020/08/05 04:57
2020/08/05 06:56