texthighlighterダウンロード - texthighlighterソースコードのダウンロード

texthighlighter

その他のソースコード

1.0.0

ダウンロード

テキストハイライト

テキストエリアの機能を維持しながら、テキストエリア内の検索結果を強調表示するバニラ JS クラス。

テキストエリア内のテキストは HTML ではないためスタイルを設定できないため、このクラスが役に立ち、テキストエリア内のテキストを強調表示できるようになります。検索結果などに表示されます。

スクリーンショット

デモをチェックしてください{:target="_blank"}

特徴

依存関係はありません。
設定はありません。クラスをインスタンス化してメソッドを呼び出すだけです。
テキストエリアごとにインスタンスを作成するだけで、必要な数のテキストエリアで使用できます。
レスポンシブ。マークは画面サイズ、テキストエリアのサイズ、スクロールに合わせて調整されます。
テキストエリアの元の背景を保持します。
ちゃんと破壊できる。すべてのイベントと構造が削除されます。
大文字と小文字を区別する検索と区別しない検索を選択できます。
自由に検索したり、単語だけを検索したりできます。
見つかった結果の数を示します。
検索結果をナビゲートして、必要に応じて表示できます。

その使用方法は非常に簡単で、必要なテキストエリアのクラスをインスタンス化し、検索メソッドを呼び出して、最初の引数で渡したテキストを強調表示します。 2 番目の引数はオプションで、true の場合は検索で大文字と小文字が区別されるようにするブール値を受け取ります。デフォルトでは大文字と小文字が区別されません。最後の引数もブール値を受け取り、true の場合は単語検索を実行します。それ以外の場合は、単語のどの部分でも一致する自由検索になります。

使用法とコード例

次のファイルをプロジェクトに追加します。

テキストハイライター.js
テキストハイライター.css

 let tarea = document . getElementById ( 'txt' ) ;
let hilite = new textHighlight ( tarea ) ;

let searchResult = 'Some Expression' ;
let sens = true ;                        // Case sensitive. Optional, default: false
let word = true ;                        // Perform a words only search. Optional, default: false
hilite . search ( searchResult , sens , word ) ;

見つかった出現数にアクセスするには、次を使用します。

 let count = hilite . count ( ) ;

prev メソッドと next メソッドを使用して、強調表示された結果間を行き来できます。このナビゲーションは周期的です。つまり、最後に到達すると次の呼び出しで最初に戻り、その逆も同様です。以下の例:

 let btnPrev = document . getElementById ( 'prev' ) ;
let btnNext = document . getElementById ( 'next' ) ;

btnPrev . addEventListener ( 'click' , hilite . prev ) ;
btnNext . addEventListener ( 'click' , hilite . next ) ;

ハイライトを消去する必要がある場合は、clear メソッドを呼び出します。

 hilite . clear ( ) ;

スコープから外れたら、destroy メソッドを呼び出すだけで、すべてがインスタンス化前の状態になります。

 hilite . destroy ( ) ;

について

このクラスは、lonekorean の highlight-within-textarea JQuery プラグインからインスピレーションを得たものです。基本的に、プロジェクトに同様の機能が必要でしたが、そのためだけに JQuery を含めたくなかったので、他に十分な適切なコードが見つかりませんでした。

ここでの主な目的は、テキストエリアで検索結果を強調表示することでした。

このクラスは Chrome 117 と Firefox 118 でテストされました。