#前提
JavaScriptで画面内検索を行おうとしています。
ヒットした文字列にはハイライトを付け、画面中央にスクロールさせます。
具体的にはchromeの画面内検索をイメージしています。
そこでひらがな、カタカナどちらで検索してもヒットさせたいです。
#問題
Chromeでは正常に動作するのですがsafariだとelement.scrollIntoView()のオプションが設定できない。
js
1setTimeout(function () { 2 let highlight = document.querySelector('.highlight'); 3 if (highlight) highlight.scrollIntoView({ behavior: "smooth", block: "center" }); 4 }, 0);
#質問したいこと
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="search.js" async defer></script> 54 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 55</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//ここ!! 32 setTimeout(function () { 33 let highlight = document.querySelector('.highlight'); 34 if (highlight) highlight.scrollIntoView({ behavior: "smooth", block: "center" }); 35 }, 0); 36}); 37 38function reset() { 39 console.log('reset'); 40 [...document.getElementsByClassName('highlight')].forEach(el => { 41 el.outerHTML = el.textContent; 42 }); 43} 44 45function katakanaToHiragana(str) { 46 return str.replace(/[\u30a1-\u30f6]/g, function (match) { 47 var chr = match.charCodeAt(0) - 0x60; 48 return String.fromCharCode(chr); 49 }); 50} 51 52function hiraganaToKatakana(str) { 53 return str.replace(/[\u3041-\u3096]/g, function (match) { 54 var chr = match.charCodeAt(0) + 0x60; 55 return String.fromCharCode(chr); 56 }); 57} 58
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。