textareaやinput要素内の任意のテキストをハイライトするスクリプト・jQuery highlightTextarea

textareaやinput要素内の任意のテキストをハイライトするjQueryプラグインのご紹介です。どこかで利用する機会があるかと思ったので備忘録。

フォームの入力項目でユーザーの入力したテキストに、設定したテキストがマッチしたらハイライトする、というもの。

jQuery highlightTextarea

東京と江戸をハイライト設定しています。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.highlighttextarea.min.js"></script>

本体とプラグインと用意されているCSSを読み込みます。

$('textarea').highlightTextarea({
  words: [{
    color: '#ADF0FF',
    words: ['foo', 'bar']
  }, {
    color: '#FFFF00',
    words: ['hogeoge']
  }]
});

色とキーワードを設定。

詳細は以下でどうぞ。ライセンスはMITです。

jQuery highlightTextarea