はじめに
この記事では、テキスト内のURLを検出して、自動的にリンクを貼ってくれるjQueryライブラリの「jquery.autolink.js」について書いています。jquery.autolink.jsを使うと、http://〜ではじまる文字に自動的にリンクを貼ることができます。
jquery.autolink.jsの入手
jquery.autolinkは以下のサイトからダウンロードすることができます。
同ページ内にはデモが用意されており、ページ内のExcuteボタンをクリックすると、http://〜やメールアドレスのテキストに自動的にリンクが貼られることが確認できます。
jquery.autolink.jsの３つの機能
jquery.autolink.jsには以下の３つの機能があります。
- URLの自動リンク
- メールアドレスの自動リンク
- 指定した文字列のハイライト
jquery.autolink.jsの使い方
１．jquery.autolink.jsをインクルードします。
<script src="/jquery.autolink.js"></script>
２．URLの自動リンクは、jQueryで取得したオブジェクトのautolink()メソッドを呼び出すだけです。
// #demo内の文字列に対して自動リンク $("#demo").autolink();
３．メールアドレスの自動リンクは、jQueryで取得したオブジェクトのmailto()メソッドを呼び出すだけです。
// #demo内のメールアドレスに対して自動リンク $("#demo").mailto();
４．指定した文字列をハイライトするには、highlightメソッドの第１引数に文字列、第２引数にハイライトするスタイルシートを指定します。
// 指定した文字列をハイライトする $("#demo").highlight("検索する文字列", '<span style="background-color:#FFFF7F;">$1</span>');
jQueryデザインブック 仕事で絶対に使うプロのテクニック
posted with amazlet at 12.03.18
MdN
売り上げランキング: 10713
