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

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

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

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Safari

SafariはAppleのウェブブラウザであり、Mac OS XとiOSのデフォルトのブラウザです。

JavaScript

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

正規表現

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

Q&A

解決済

1回答

5002閲覧

JavaScriptの正規表現でsafari対応させたい

kei_m

総合スコア4

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Safari

SafariはAppleのウェブブラウザであり、Mac OS XとiOSのデフォルトのブラウザです。

JavaScript

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

正規表現

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

0グッド

0クリップ

投稿2020/08/05 04:01

#前提
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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こんにちは。

Safariは正規表現の後読みに対応していないためエラーになるようです。
以下のサイトが参考になると思います。
プログラマー探偵の事件簿: Invalid regular expression: invalid group specifier name

投稿2020/08/05 04:10

編集2020/08/05 04:12
DreamTheater

総合スコア1095

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2020/08/05 04:33

jsの後読みはブラウザの対応が遅れたので「つかわない」 前提で正規表現を書くのが基本です
DreamTheater

2020/08/05 04:57

yambejpさん フォローありがとうございます!
kei_m

2020/08/05 06:56

safariだと音也未対応していないのですね勉強になりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問