Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

指定した要素内から任意の文字列をハイライトするためのjQueryプラグインを作ってみた

この前作成した、acms-util-kitに検索機能をつけるべく今回、指定した要素内から任意の文字列を見つけ出すためのjQueryプラグインを作りました。

使い方

<div class="search">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit magni consequuntur ex perferendis iusto tempora omnis id 
  <div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, dignissimos atque enim, debitis nesciunt unde ipsum? Saepe fugiat molestias consequuntur quam, inventore quod nulla! At tempora molestiae sed consequatur ipsam.
    </p>
  </div>accusamus qui dicta, fugit fugiat necessitatibus. Consectetur eos, eveniet aperiam consequatur ipsa reiciendis!
</div>
<script>
$(".search").findInPage({keyword:"am"});
</script>

実行結果


オプション

tagどの要素で検索したキーワードを囲うか
markその要素になんというクラス名を付与するか
caseSensitive大文字、小文字を区別するか

Githubでソースを公開しています。



堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド