jQueryでハイライト(強調表示)

最近のブラウザには標準搭載されているハイライト(強調表示)機能。

入力した検索キーワードの背景が黄色くなるアレです。

jQueryをつかって似たような事ができるプラグインはこちら

http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

使い方はjQueryらしく、いたってシンプル。

まずは、ハイライト時のスタイルを定義してあげる。

この際のクラス名は「highlight」固定らしい 。

まぁ、ハイライトっていったら背景色黄色でしょ、って事で、こんな感じ

<style type=”text/css”>
.highlight {
background-color:yellow;
}
</style>
これで準備OK。
あとは
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”jquery.highlight-3.js”></script>
<script type=”text/javascript”>
function doHighlight() {
$(“ハイライトさせたい要素のクエリ”).highlight(“ハイライトさせたい文字列”);
}
</script>

これでOK。

サンプルも作ってみました。

***ハイライトのサンプル***

相変わらずjQueryは簡単で助かる。

1 Comments.

  1. Ctrl+Fみたいな検索窓を設置する | kanae-design-works - pingback on 2018年1月11日 at 12:35 午前

Trackbacks and Pingbacks: