フォームとjQueryを用いて、特定のタグ内に入っているテキストをページ内で検索し、それ以外は非表示にする方法

タイトルそのままです。

フォームを用いてキーワード検索を行い、特定のタグでくくられた部分以外をjQueryで非表示にすることで、検索を行います。

①
まず、HTMLでコードを書き、フォームを作ります。

<input type="text" class="search">

クラス名も適当につけておきましょう。②で使います。

②

jsファイル内にコードを記述します。

$(window).on('load', function(event) {

$(".search").on("change",function(e){ //.searchは①で作ったフォームのクラス名です

//on("change"　の部分により、『フォームの中身が入力されて決定ボタンが押されたら』動作開始します

var formText = $(this).val(); //.valでフォームの中のテキストをとっています。
var reg = new RegExp(formText);//RegExpは正規表現/ / で囲む処理を行います。つまり、formTextを正規表現にしています。それに対して処理を行います。newは、このRegExpオブジェクトを使う宣言です。

$("table tr").each(function(i,e){//.eachを使ってテーブルを回しています。ここでは、table tr の要素を取っています。（iはincriment 、eはelementという意味です）
var text = $(e).children("td").eq(0).text();//『text』に変数をいれます。childrenはeの中の要素（子供）のなかの<td>タグのものを拾っています。そしてeq(0)で、テーブルの中にある要素の中で1番目（０，１，２とカウントする）のものを取ってきています。蛇足ですが、javascriptのeachだとiとeが逆です。これはjQueryの.eachです。
if(!reg.test(text)){//.test はregに格納された文字列内に『text』が存在するかのメソッドです。regにいれた変数が、入力テキストの『text』と違う場合は…

$(e).hide()//非表示にします。
}else {//それ以外の場合は
$(e).show()//表示します。
}
})
})

});

このようにして、フォームに入れられたテキストをjQueryで処理することにより

検索を行っています。

ちなみに、jsファイルを読みこむ際は、HTMLファイルが読み出された後に読み込むようにしましょう。

この手法はさまざまなところで使える汎用性の高いものなので、使えるようにしておくと便利でしょう。