3分で分かる！JavaScriptでハイライト表示機能の実装方法
2024-07-27
jQueryで単語をハイライト表示する
前提条件
このチュートリアルを始める前に、以下の知識が必要です。
- HTML
- CSS
- jQuery
ハイライト表示の基本
単語をハイライトするには、以下の2つの方法があります。
background-color プロパティを使う
<p>これはハイライトしたい単語です</p>
.highlight {
background-color: yellow;
}
$(function() {
$("p").html($("p").text().replace(/ハイライトしたい単語/g, "<span class='highlight'>ハイライトしたい単語</span>"));
});
span タグを使う
<p><span class="highlight">これはハイライトしたい単語です</span></p>
.highlight {
background-color: yellow;
}
$(function() {
$("p").html($("p").text().replace(/ハイライトしたい単語/g, "<span class='highlight'>ハイライトしたい単語</span>"));
});
どちらの方法でも、background-color プロパティを使ってハイライトしたい単語の背景色を変えることができます。
複数の単語をハイライト表示する
複数の単語をハイライト表示するには、replace() メソッドを複数回呼び出すか、正規表現を使うことができます。
複数の replace() メソッドを使う
$(function() {
$("p").html($("p").text().replace(/ハイライトしたい単語1/g, "<span class='highlight'>ハイライトしたい単語1</span>").replace(/ハイライトしたい単語2/g, "<span class='highlight'>ハイライトしたい単語2</span>"));
});
正規表現を使う
$(function() {
$("p").html($("p").text().replace(/ハイライトしたい単語1|ハイライトしたい単語2/g, "<span class='highlight'>$&</span>"));
});
$& は、マッチした文字列全体を表します。
大文字と小文字を区別しない
大文字と小文字を区別せずにハイライト表示するには、i フラグを指定します。
$(function() {
$("p").html($("p").text().replace(/ハイライトしたい単語/gi, "<span class='highlight'>$&</span>"));
});
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Highlight a word with jQuery</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>これはハイライトしたい単語です</p>
<p><span class="highlight">これはハイライトしたい単語です</span></p>
<script src="jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
.highlight {
background-color: yellow;
}
$(function() {
// 単語をハイライト表示する
$("p").html($("p").text().replace(/ハイライトしたい単語/g, "<span class='highlight'>$&</span>"));
// 複数の単語をハイライト表示する
$("p").html($("p").text().replace(/ハイライトしたい単語1|ハイライトしたい単語2/g, "<span class='highlight'>$&</span>"));
// 大文字と小文字を区別せずにハイライト表示する
$("p").html($("p").text().replace(/ハイライトしたい単語/gi, "<span class='highlight'>$&</span>"));
});
このコードを実行すると、以下のようになります。
これはハイライトしたい単語です
これはハイライトしたい単語です
実行方法
このコードを実行するには、以下の手順が必要です。
- 上記のコードをHTMLファイルとCSSファイルに保存します。
- jQueryライブラリをダウンロードして、HTMLファイルと同じディレクトリに保存します。
- HTMLファイルをブラウザで開きます。
単語をハイライト表示する他の方法
JavaScript
<p>これはハイライトしたい単語です</p>
function highlight(text, word) {
return text.replace(new RegExp(word, "gi"), "<span class='highlight'>$&</span>");
}
$("p").html(highlight($("p").text(), "ハイライトしたい単語"));
<p>これは<span class="highlight">ハイライトしたい単語</span>です</p>
.highlight {
background-color: yellow;
}
<p>これは<strong>ハイライトしたい単語</strong>です</p>
javascript jquery html
