10 jQueryテキストハイライタープラグイン

この記事は、2016年5月に更新されて、プラグインを強調するテキストの現在のステータスを反映しています。

多くのアプリケーションまたはWebサイトでは、ユーザーが特定の用語を検索できます。このプロセスをスピードアップし、優れたユーザーエクスペリエンスを提供し、ユーザーが検索しているものを見つけるのを支援するために、特定のページでこれらの検索用語を動的に強調することができます。

次のリストは、この目的を達成するために使用できるプラグインを強調する10のjQueryテキストのリストです。

キーポイント

• この記事には、ユーザーエクスペリエンスを改善するためにWebページの検索用語を動的に強調するために使用できるjQueryテキストの強調表示プラグインがリストされています。
• リストされたプラグインは、クロスブラウザーのユニットテストに基づいてハイライトしますカスタムオプションは、検索用語のフィルタリングプラグインをハイライトするためのハイライトカテゴリを定義しますTextarea要素内のテキスト。
この記事は、プラグインのインストールとカスタマイズ、ブラウザの互換性、ハイライトを削除する方法、ページパフォーマンスへの影響など、jQueryテキストのハイライトプラグインに関する一般的な質問にも答えます。

1. mark.js 多数のクロスブラウザー単位テストとコード品質監視に基づいて、ES6で記述された検索用語またはカスタム正規表現のプラグインを強調表示するキーワード。さまざまなユースケースを満たすように設計されており、プラグインなどを強調する次のテキストのすべてのオプション（ディクリティック、同義語、iframesなど）を含むように設計されています。

   codepen demo を表示します
   ソースコード

2. ハイライト 多くのブランチの基礎を設定するプラグインを強調する非常にシンプルで軽量のテキスト。カスタマイズは許可されていないため、ファイルサイズが非常に小さい（1.4 kb）という利点があります。

   codepen demo を表示します
   ソースコード

3. jquery.highlight ハイライトのブランチ（上記のポイント2）。カスタム要素とクラス名とケースセンスリとワードソンのオプションを指定する基本オプションを追加します。残念ながら、このプラグインは維持されておらず（2010年に最後にコミットされ、ブランチの再統合なし）、無効化の問題があるため、注意して使用する必要があります。

   codepen demo
   を表示します ソースコード

4. jquery.highlightregex カスタム正規表現を強調表示するための別のハイライト（上記のポイント2）ベースのプラグイン。 jquery.highlight（上記のポイント3）と同様に、カスタム要素とクラス名を指定するための基本的なオプションを提供します。他のオプションは、カスタムの正規表現に手動で追加できます。たとえば、ケースを無視する「i」フラグです。

   codepen demo
   を表示します ソースコード

5. highlight_words ハイライトのように、カスタマイズオプションのない単純なjQueryハイライト機能（上記のポイント2）。ハイライトを削除し、ネストされた子供の要素で検索するのに便利ではない機能を提供しないことに注意する必要があります。ただし、許可情報は含まれていませんが、さらなる実装のための優れた基盤を提供します。

   codepen demo
   を表示します ソースコード

6. jconpagefilter このプラグインを使用すると、検索用語でリストをフィルタリングし、検索された一致を強調表示できます。ケースに敏感な検索を有効にするオプションがありますが、許可情報は含まれていません。

   codepen demo
   を表示します ソースコード

7. SearchHighlight カスタムハイライトクラスを定義するオプションを提供する別のテキスト。

   このプラグインは2006年に書かれており、長い間更新されておらず、ライセンス情報が含まれていないため、使用する際には注意してください。

   codepen demo
   を表示します ソースコード

8. jquery-highlighter このプラグインを使用すると、必要なCSSアニメーション設定を実装することにより、自己包装されたテキストの強調表示要素をアニメーション化できます。もちろん、必要に応じて独自のCSSを書くこともできます。

   codepen demo
   を表示します ソースコード

9. texthighlighter このプラグインを使用すると、選択したテキストをカスタムカラーで強調表示したり、ユーザーが選択したテキストを観察したりできます。このプラグインは維持されなくなったため、注意して使用する必要があります。

   codepen demo
   を表示します ソースコード

10. jQuery highlighttextarea Textarea要素はHTMLをレンダリングできないため（上記のプラグインのいずれかが一致するように生成されるのと同じように）、このプラグインを使用すると、TextArea要素内のテキストを強調表示できます。 CaseSensitiveやColorなどのオプションを提供し、いくつかのユニットテストで構築されていますが、多くの未解決の問題があり、ハイライトの削除は提供されません。

    codepen demo
    を表示します ソースコード

結論

わかりました、これはプラグインを強調する上位10のjQueryテキストの私の現在のリストです。これらのプラグインの経験がある場合（良いか悪いか！）、または言及する価値のあるプラグインを強調する他のテキストを知っている場合は、コメントでお知らせください！

jQueryテキストに関するよくある質問

上記のすべての「view codepen demo "および"

"を実際の//m.sbmmt.com/link/に置き換える必要があることに注意してください。 946AF3555203AFDB63E571B873E419F6およびGITHUBまたは他のソースコードホスティングプラットフォームへのリンク。 外部のWebサイトにアクセスできないため、これらのリンクを提供することはできません。

以上が10 jQueryテキストハイライタープラグインの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。