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

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

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

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

Safari

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

JavaScript

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

正規表現

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

解決済

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

kei_m
kei_m

総合スコア4

Chrome

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

Safari

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

JavaScript

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

正規表現

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

1回答

0グッド

0クリップ

2792閲覧

投稿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

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

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

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

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

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

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

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

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

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

回答1

2

ベストアンサー

こんにちは。

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

投稿2020/08/05 04:10

編集2020/08/05 04:12
DreamTheater

総合スコア1095

kei344, standard-soft👍を押しています

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

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

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

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

回答へのコメント

yambejp

2020/08/05 04:33

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

2020/08/05 04:57

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

2020/08/05 06:56

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

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

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

Chrome

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

Safari

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

JavaScript

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

正規表現

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