Mark.jsで任意のWebページに検索キーワードの強調表示を追加する

ほとんどのブラウザは CTRL + F機能 ユーザーが探しているものは何でも検索して見つけます。しかし、この機能 モバイルデバイスではサポートされていません 動的テキストを使用してもうまく機能しません.

幸いなことに、 Mark.js, を追加する無料のJavaScriptプラグイン ハイライト検索機能 簡単に任意のページに.

デフォルトでは、 バニラJSプラグイン 実行することもできます jQueryの上に. これは完全にオープンソースのプロジェクトなので、コマーシャルまたはその他のウェブサイトで自由に使用できます。.

それは余分な機能が付属していることを除いて、他のブラウザ検索機能とよく似た働きをします。あなたは付け加えられます あなた自身のカスタムフィルタ に基づいて単語を検索 正規表現, 特定の同義語, そしてでさえ 動的ページ要素 iframeなど.

はじめに、Mark.jsファイルをダウンロードするだけです。 GitHubから またはファイルをホストする CDNを通じて 時間を節約するために.

この機能を実行する必要があります 入力フィールドに接続 ページ上。このようにして、ユーザーは検索語を入力することができます。 すぐにフィードバックを受け取る 強調表示されたテキストを介して.

これが サンプルスニペット デモページから：

 $（ "。context"）。mark（キーワード[、オプション]）; 

の .コンテキスト 関数があるべきところにクラスターゲット 用語を検索する. あなたが使用するかもしれません デフォルトのHTML 素子 ページ全体を検索しようとしているのであれば 複数の要素 異なるタブ付きウィジェットやiframeなど.

それから、 マーク（） あなたを機能させる キーワードを渡す, オプションと一緒に（あなたが望むなら）.

ユーザーにキーワードを入力させると、 機能を自動更新する キーを押すたびに新しいキーワードが表示されます。このイベントをターゲットにする特定の機能さえあります.

Mark.js すべての主要ブラウザで動作します, Chrome、Firefox、Opera（v12以降）、およびInternet Explorer（9以降）を含みます。ドキュメントに従って最新のファイルを使用すれば、セットアップは本当に簡単です。.

しかし、あなたが見たいのなら Mark.jsの実際 でのぞき見をする 下にいじる 非常に基本的なjQueryデモを使ってLorem Ipsumのいくつかの段落を検索する.