フォームに入力、リアルタイムで合致するテキストを検索してハイライトさせる方法。
カテゴリ：WEB制作
タグ：
今回は『フォームに入力、リアルタイムで合致するテキストを検索してハイライトさせる方法』を紹介します。
ユーザーが調べたいキーワードをフォームに入力することでハイライトがかけられるので読み物が多いサイトなどでは活用できます。
コードの紹介
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>テキストハイライト</title>
<style>
.highlight {
background-color: rgba(255, 208, 0, 0.549);
}
</style>
</head>
<body>
<input type="text" name="search" value="" id="text_search" placeholder="ハイライトしたい文字を入力" autocomplete="off">
<div class="text_search_target">
<p>2000年代は、IT業界にとってまさに「革命的な進歩の10年間」でした。この時代にはインターネットの商業化が加速し、数多くの革新的な技術・サービス・企業が登場して、現在のデジタル社会の基盤を築きました。以下に、2000年代の主なIT企業の進歩やトピックをまとめてみました。
</p>
</div>
<h1>インターネットの普及と高速化</h1>
<div class="text_search_target">
<ul>
<li>ブロードバンドの普及により、常時接続が当たり前に。</li>
<li>ADSLから光回線へ：高速通信が動画・音楽ストリーミングの土台に。</li>
</ul>
</div>
<h1>Googleの台頭（創業：1998年）</h1>
<div class="text_search_target">
<ul>
<li>2000年：AdWords開始 → ネット広告の革命。</li>
<li>2004年：Gmailリリース</li>
<li>2005年：Google Maps、YouTube買収（2006年）</li>
<li>2008年：Chromeリリース → ブラウザ戦争へ参入。</li>
</ul>
</div>
<h1>FacebookとSNSの誕生（2004年）</h1>
<div class="text_search_target">
<ul>
<li>Facebook（2004年）、YouTube（2005年）、**Twitter（2006年）**が登場。</li>
<li>人々のコミュニケーションの形が大きく変わり、「Web 2.0」時代に突入。</li>
</ul>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const searchInput = document.getElementById("text_search");
const targets = document.querySelectorAll(".text_search_target");
searchInput.addEventListener("input", function () {
const searchText = this.value.trim();
targets.forEach(target => {
let text = target.innerHTML;
target.innerHTML = text.replace(/<span class="highlight">|<\/span>/g, "");
if (searchText !== "") {
const regex = new RegExp(searchText, "g");
target.innerHTML = target.innerHTML.replace(regex, `<span class="highlight">${searchText}</span>`);
}
});
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>テキストハイライト</title>
<style>
.highlight {
background-color: rgba(255, 208, 0, 0.549);
}
</style>
</head>
<body>
<input type="text" name="search" value="" id="text_search" placeholder="ハイライトしたい文字を入力" autocomplete="off">
<div class="text_search_target">
<p>2000年代は、IT業界にとってまさに「革命的な進歩の10年間」でした。この時代にはインターネットの商業化が加速し、数多くの革新的な技術・サービス・企業が登場して、現在のデジタル社会の基盤を築きました。以下に、2000年代の主なIT企業の進歩やトピックをまとめてみました。
</p>
</div>
<h1>インターネットの普及と高速化</h1>
<div class="text_search_target">
<ul>
<li>ブロードバンドの普及により、常時接続が当たり前に。</li>
<li>ADSLから光回線へ：高速通信が動画・音楽ストリーミングの土台に。</li>
</ul>
</div>
<h1>Googleの台頭（創業：1998年）</h1>
<div class="text_search_target">
<ul>
<li>2000年：AdWords開始 → ネット広告の革命。</li>
<li>2004年：Gmailリリース</li>
<li>2005年：Google Maps、YouTube買収（2006年）</li>
<li>2008年：Chromeリリース → ブラウザ戦争へ参入。</li>
</ul>
</div>
<h1>FacebookとSNSの誕生（2004年）</h1>
<div class="text_search_target">
<ul>
<li>Facebook（2004年）、YouTube（2005年）、**Twitter（2006年）**が登場。</li>
<li>人々のコミュニケーションの形が大きく変わり、「Web 2.0」時代に突入。</li>
</ul>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const searchInput = document.getElementById("text_search");
const targets = document.querySelectorAll(".text_search_target");
searchInput.addEventListener("input", function () {
const searchText = this.value.trim();
targets.forEach(target => {
let text = target.innerHTML;
target.innerHTML = text.replace(/<span class="highlight">|<\/span>/g, "");
if (searchText !== "") {
const regex = new RegExp(searchText, "g");
target.innerHTML = target.innerHTML.replace(regex, `<span class="highlight">${searchText}</span>`);
}
});
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>テキストハイライト</title>
<style>
.highlight {
background-color: rgba(255, 208, 0, 0.549);
}
</style>
</head>
<body>
<input type="text" name="search" value="" id="text_search" placeholder="ハイライトしたい文字を入力" autocomplete="off">
<div class="text_search_target">
<p>2000年代は、IT業界にとってまさに「革命的な進歩の10年間」でした。この時代にはインターネットの商業化が加速し、数多くの革新的な技術・サービス・企業が登場して、現在のデジタル社会の基盤を築きました。以下に、2000年代の主なIT企業の進歩やトピックをまとめてみました。
</p>
</div>
<h1>インターネットの普及と高速化</h1>
<div class="text_search_target">
<ul>
<li>ブロードバンドの普及により、常時接続が当たり前に。</li>
<li>ADSLから光回線へ：高速通信が動画・音楽ストリーミングの土台に。</li>
</ul>
</div>
<h1>Googleの台頭（創業：1998年）</h1>
<div class="text_search_target">
<ul>
<li>2000年：AdWords開始 → ネット広告の革命。</li>
<li>2004年：Gmailリリース</li>
<li>2005年：Google Maps、YouTube買収（2006年）</li>
<li>2008年：Chromeリリース → ブラウザ戦争へ参入。</li>
</ul>
</div>
<h1>FacebookとSNSの誕生（2004年）</h1>
<div class="text_search_target">
<ul>
<li>Facebook（2004年）、YouTube（2005年）、**Twitter（2006年）**が登場。</li>
<li>人々のコミュニケーションの形が大きく変わり、「Web 2.0」時代に突入。</li>
</ul>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const searchInput = document.getElementById("text_search");
const targets = document.querySelectorAll(".text_search_target");
searchInput.addEventListener("input", function () {
const searchText = this.value.trim();
targets.forEach(target => {
let text = target.innerHTML;
target.innerHTML = text.replace(/<span class="highlight">|<\/span>/g, "");
if (searchText !== "") {
const regex = new RegExp(searchText, "g");
target.innerHTML = target.innerHTML.replace(regex, `<span class="highlight">${searchText}</span>`);
}
});
});
});
</script>
</body>
</html>
コードを解説
HTML
入力フォームのパーツを作成します。
Javascriptで実行させるために『text_search』のIDをつけておきます。
連絡先などの入力でもないのでオートコンプリートも『autocomplete=”off”』で切っておきます。
<input type="text" name="search" value="" id="text_search" placeholder="ハイライトしたい文字を入力" autocomplete="off">
<input type="text" name="search" value="" id="text_search" placeholder="ハイライトしたい文字を入力" autocomplete="off">
<input type="text" name="search" value="" id="text_search" placeholder="ハイライトしたい文字を入力" autocomplete="off">
検索の対象となるテキスト群を『text_search_target』のクラスで包みます。
<div class="text_search_target">
<p>2000年代は、IT業界にとってまさに「革命的な進歩の10年間」でした。この時代にはインターネットの商業化が加速し、数多くの革新的な技術・サービス・企業が登場して、現在のデジタル社会の基盤を築きました。以下に、2000年代の主なIT企業の進歩やトピックをまとめてみました。
</p>
</div>
<h1>インターネットの普及と高速化</h1>
<div class="text_search_target">
<ul>
<li>ブロードバンドの普及により、常時接続が当たり前に。</li>
<li>ADSLから光回線へ：高速通信が動画・音楽ストリーミングの土台に。</li>
</ul>
</div>
<h1>Googleの台頭（創業：1998年）</h1>
<div class="text_search_target">
<ul>
<li>2000年：AdWords開始 → ネット広告の革命。</li>
<li>2004年：Gmailリリース</li>
<li>2005年：Google Maps、YouTube買収（2006年）</li>
<li>2008年：Chromeリリース → ブラウザ戦争へ参入。</li>
</ul>
</div>
<h1>FacebookとSNSの誕生（2004年）</h1>
<div class="text_search_target">
<ul>
<li>Facebook（2004年）、YouTube（2005年）、**Twitter（2006年）**が登場。</li>
<li>人々のコミュニケーションの形が大きく変わり、「Web 2.0」時代に突入。</li>
</ul>
</div>
<div class="text_search_target">
<p>2000年代は、IT業界にとってまさに「革命的な進歩の10年間」でした。この時代にはインターネットの商業化が加速し、数多くの革新的な技術・サービス・企業が登場して、現在のデジタル社会の基盤を築きました。以下に、2000年代の主なIT企業の進歩やトピックをまとめてみました。
</p>
</div>
<h1>インターネットの普及と高速化</h1>
<div class="text_search_target">
<ul>
<li>ブロードバンドの普及により、常時接続が当たり前に。</li>
<li>ADSLから光回線へ：高速通信が動画・音楽ストリーミングの土台に。</li>
</ul>
</div>
<h1>Googleの台頭（創業：1998年）</h1>
<div class="text_search_target">
<ul>
<li>2000年：AdWords開始 → ネット広告の革命。</li>
<li>2004年：Gmailリリース</li>
<li>2005年：Google Maps、YouTube買収（2006年）</li>
<li>2008年：Chromeリリース → ブラウザ戦争へ参入。</li>
</ul>
</div>
<h1>FacebookとSNSの誕生（2004年）</h1>
<div class="text_search_target">
<ul>
<li>Facebook（2004年）、YouTube（2005年）、**Twitter（2006年）**が登場。</li>
<li>人々のコミュニケーションの形が大きく変わり、「Web 2.0」時代に突入。</li>
</ul>
</div>
<div class="text_search_target">
<p>2000年代は、IT業界にとってまさに「革命的な進歩の10年間」でした。この時代にはインターネットの商業化が加速し、数多くの革新的な技術・サービス・企業が登場して、現在のデジタル社会の基盤を築きました。以下に、2000年代の主なIT企業の進歩やトピックをまとめてみました。
</p>
</div>
<h1>インターネットの普及と高速化</h1>
<div class="text_search_target">
<ul>
<li>ブロードバンドの普及により、常時接続が当たり前に。</li>
<li>ADSLから光回線へ：高速通信が動画・音楽ストリーミングの土台に。</li>
</ul>
</div>
<h1>Googleの台頭（創業：1998年）</h1>
<div class="text_search_target">
<ul>
<li>2000年：AdWords開始 → ネット広告の革命。</li>
<li>2004年：Gmailリリース</li>
<li>2005年：Google Maps、YouTube買収（2006年）</li>
<li>2008年：Chromeリリース → ブラウザ戦争へ参入。</li>
</ul>
</div>
<h1>FacebookとSNSの誕生（2004年）</h1>
<div class="text_search_target">
<ul>
<li>Facebook（2004年）、YouTube（2005年）、**Twitter（2006年）**が登場。</li>
<li>人々のコミュニケーションの形が大きく変わり、「Web 2.0」時代に突入。</li>
</ul>
</div>
CSS
合致した際のテキストのスタイルを指定します。
.highlight {
background-color: rgba(255, 208, 0, 0.549); /* 指定されたハイライトカラー */
}
.highlight {
background-color: rgba(255, 208, 0, 0.549); /* 指定されたハイライトカラー */
}
.highlight {
background-color: rgba(255, 208, 0, 0.549); /* 指定されたハイライトカラー */
}
Javascript
読み込みが終わってから実行します。
document.addEventListener("DOMContentLoaded", function () {
});
document.addEventListener("DOMContentLoaded", function () {
});
document.addEventListener("DOMContentLoaded", function () {
});
入力フォームと検索対象になるテキスト群を取得します。
const searchInput = document.getElementById("text_search");
const targets = document.querySelectorAll(".text_search_target");
const searchInput = document.getElementById("text_search");
const targets = document.querySelectorAll(".text_search_target");
const searchInput = document.getElementById("text_search");
const targets = document.querySelectorAll(".text_search_target");
検索ボックスの入力イベントを監視します。
targets.forEach(target => {
});
targets.forEach(target => {
});
targets.forEach(target => {
});
元のテキストを取得を取得、既存のハイライトを初期化します。
let text = target.innerHTML;
target.innerHTML = text.replace(/<span class="highlight">|<\/span>/g, "");
let text = target.innerHTML;
target.innerHTML = text.replace(/<span class="highlight">|<\/span>/g, "");
let text = target.innerHTML; target.innerHTML = text.replace(/<span class="highlight">|<\/span>/g, "");
入力フォームが空でなければ正規表現を使用して一致部分を『<span class=”highlight”></span>』で包んでハイライトさせます。
if (searchText !== "") {
const regex = new RegExp(searchText, "g");
target.innerHTML = target.innerHTML.replace(regex, `<span class="highlight">${searchText}</span>`);
}
if (searchText !== "") {
const regex = new RegExp(searchText, "g");
target.innerHTML = target.innerHTML.replace(regex, `<span class="highlight">${searchText}</span>`);
}
if (searchText !== "") {
const regex = new RegExp(searchText, "g");
target.innerHTML = target.innerHTML.replace(regex, `<span class="highlight">${searchText}</span>`);
}
以上で実装完了です。
まとめ
以上、『フォームに入力、リアルタイムで合致するテキストを検索してハイライトさせる方法。』でした。
ぜひ、ご参考ください。
