入力フィールドに入力したキーワードにより、下に表示しているテキストを検索し、マッチした文字列をハイライト表示する。テキストは「雪」と「雲」の２種類の文字からなる。

画像をクリックするとページが開いて実際の動作を確認できます

HTML & JavaScript

正規表現の置換によりキーワードにマッチした文字列を span要素で囲む。要素の属性に背景色（background-color）を黄色にするクラス（.match）を指定する。結果をリセットするときは置換により span要素の記述を消去する。

CSS

検索ボタンのクリックでマッチした全ての文字列の背景色を黄色にする、最初のマッチした文字列は赤色のハイライトにし、Tabキーにより、ハイライトを順々と次にマッチした文字列に移動させる。終わりまで来たら最初に戻る。

画像をクリックするとページが開いて実際の動作を確認できます

HTML & JavaScript

本処理では、Tabキーを受けてマッチした文字列のハイライトを１個先の文字列に移動している。preventDefaultメソッは、対象とするイベント（Keydown）のシステム側のデフォルトの処理を無効化する。ここでは Tabキーが押されたときにイベントがアプリケーションだけに渡るようになる。もし無効化しなければ、Tabキーにより、カーソルがテキスト入力フィールド、ボタン、URL入力エリアにも移動するようになってしまう。

マッチした文字列の背景色を変えるために ２種類の CSSクラス match（黄色） と selected（赤）を定義し、文字列を囲む span要素の属性にいずれかを設定する。

CSS