◀︎

サーチ

g: →（グローバル）正規表現に一致するすべての箇所を検索
i: 大文字・小文字を区別しない検索
i →（大文字小文字を無視）: test と Test / TEST / tEsT など, 大小文字を区別せずに一致させる.





.サーチ_ボックス{text-align:center;
margin-top:200px 0;}
.サーチ_ボックス input[type="text"]{font-size:20px;
width:80%;
padding:10px;
border:1px solid #16abcd;
border-radius:5px;}
.サーチ_ボックス input[type="button"]{font-size:20px;
margin:10px;
padding:4px 8px;
border:1px solid #16abcd;
background-color:#16abcd;
color:white;
border-radius:5px;
cursor:pointer;}
.すいっち{display:flex;}
.わーど_検索{background-color:#ff8888;}
main{display:grid;
grid-template-columns:1fr;
gap:10px;
padding:20px;
overflow-y:auto;}



<div class="サーチ_ボックス">
<input type="text"id="さーち"placeholder="検索ワード">
<input type="button"value="検索"onclick="文字の検索()">
</div>
<main id="記事">
<div style="color:gray;border:solid 1px silver;border-radius:4px;padding:6px;">
<h2>Google Search</h2>
<p>This is a sample website to demonstrate the usage of the header element.</p>
</div>
<div style="border:solid 1px silver;border-radius:4px;padding:6px;">
<h3 style="color:green;">グーグル検索</h3>
<p style="color:green;">Google の使命は, 世界中の情報を整理し, 世界中の人がアクセスできて使えるようにすることです.</p>
</div>
</main>



function 文字の検索()
{var 文字の検索=document.getElementById("さーち").value.toLowerCase();
var 書き込み=document.querySelectorAll('#記事 > div');

書き込み.forEach(article=>
{var contentHTML=article.innerHTML;
contentHTML=contentHTML.replace(/<mark class="わーど_検索">(.*?)<\/mark>/g,'$1');
article.innerHTML=contentHTML;

if(文字の検索)
{var regex=new RegExp(文字の検索, 'gi');
article.innerHTML=article.innerHTML.replace(regex, function(matched)
{return '<mark class="わーど_検索">' + matched + '</mark>';});}});}