【短期集中連載】この冬作ろう！jQueryプラグイン講座 ― 第4回

3日目：単語に自動的にリンクを追加しよう

2009年01月03日 08時00分更新

文● 古籏一浩

この記事は「【短期集中連載】この冬作ろう！ jQueryプラグイン講座」の第3日目です→[連載インデックス]へ


単語にリンクを貼って分かりやすいサイトにするプラグインが今日のお題

　Webページに書かれている文章はバリエーションが多く、中には情報産業や医学用語など、専門的な言葉が含まれていることがあります。知っている人が読むのであれば専門用語など気にならないでしょう。しかし、そうでない人の場合には、ちょっとした用語が分からなかったりすると、いちいちWikipediaやGoogleなどを使って調べることになります。

　そんな時に、特定の単語に自動的にリンクを貼ってくれるようなプラグインがあれば便利です。たとえばテキスト中に「腸捻転」という単語があれば、「http://ja.wikipedia.org/wiki/腸捻転」にリンクする、といったイメージです。

　jQueryプラグイン講座3日目は、特定の単語に対して自動的にリンクを追加するプラグインを作成してみましょう。

リンクする単語とURLは配列に

　今回作成するプラグインの名前（メソッド名）は「addlink」としました。このプラグインを組み込むと、以下の単語に対して、指定されたWebページへのリンクが自動的に貼られるようにします。なお、リンク先はすべてWikipediaになっていますが、他のWebサイトでももちろん問題ありません。

単語	リンク先
富士山	http://ja.wikipedia.org/wiki/富士山
京都	http://ja.wikipedia.org/wiki/京都市
秋葉原	http://ja.wikipedia.org/wiki/秋葉原
築地市場	http://ja.wikipedia.org/wiki/築地市場

　この自動リンク追加プラグインでは、これまでのように正規表現の「replace()」を列記するのではなく、あらかじめ配列に単語とリンク先のURLを入れておきます。こうしておけば、単語が増えても簡単に対応できます。

　単語は「dict」という名前の配列変数に入れておきます。偶数番目は単語、その次の奇数番目の要素がリンク先のURLです。あとは、「for()」を使って単語の数だけ置換処理を繰り返します。

　単語が多くなったときにリンクだらけになってしまうのを避けるため、今回はグローバルマッチ（文章全体）の置換処理はせず、最初に見つかったものだけをリンクにしています。もちろん、これまでと同様にgオプションを付加して全体を置換しても問題ありません。

　また、repace()の最初のパラメータは「/～/」でなく「new RegExp()」とします。変数などを使用する場合には、「RegExp()」の最初のパラメータに置換（検索）文字を指定し、2番目のパラメータで"g"や"i"などオプションパラメータを指定します。2番目のパラメータは今回省略していますので、グローバルマッチは行なわれず、最初に見つかった単語だけにリンクを追加します。

　作成したら「addlink.js」という名前でファイルを保存します。

【自動単語リンクプラグインのソース】


/* 自動単語リンクプラグイン for jQuery
2009.1 By KaZuhiro FuRuhata  */
$.fn.addlink = function(baseURL){
    var dict = ["富士山", "http://ja.wikipedia.org/wiki/富士山",
                "京都","http://ja.wikipedia.org/wiki/京都市",
                "秋葉原","http://ja.wikipedia.org/wiki/秋葉原",
                "築地市場","http://ja.wikipedia.org/wiki/築地市場" ];
    return this.each(function(){
        var srcText = this.innerHTML;
        for (var i=0; i<dict.length; i+=2){
            srcText = srcText.replace(new RegExp(dict[i]),"<a href='"+dict[i+1]+"'>"+dict[i]+"</a>");
        }
        this.innerHTML = srcText;
    });
}