自動でレス参照に内部リンクを付加する方法（JavaScript）

2ちゃんねる等の掲示板サイトで「>>10」のようにレスを参照（引用）することがあります。

—– 例 —–

1: [梓はおれの嫁]

あずにゃんペロペロ(^ω^)

2: [クリスタちゃんはおれの嫁]

クリスタちゃんマジ天使

3: [全員おれの嫁]

>>1

>>2

どちらもおれの嫁！

—————

掲示板サイト開発者は、その書き込まれた文字列「>>10」に自動的に<a>タグを付加して内部リンクで参照レスまで飛べるようにしたいときがあると思います。JavaScriptによる、その方法を説明します。

HTMLが以下のようになっているとします。

<p id="1">
    1: [梓はおれの嫁]<br>
    あずにゃんペロペロ(^ω^) 
</p>
<br>
<p id="2">
    2: [クリスタちゃんはおれの嫁]<br>
    クリスタちゃんマジ天使 
</p>
<br>
<p id="3">
    3: [全員おれの嫁]<br>
    >>1<br>
    >>2<br>
    どちらもおれの嫁
</p>

各レスを<p>タグ等で括って、idにレス番号を付加し、アンカーを設定します。

そして、<a>タグで「href=”#アンカー名（id名）”」とし、内部リンクで参照レスに飛ばします。

JavaScriptのコードは以下になります。jQuery使用。

(function($) {
    $.fn.resAutoLink = function(){
        return this.each(function(){
            this.innerHTML = this.innerHTML.replace(/>>([0-9]+)/gi, "<a href='#$1'>&gt;&gt;$1");
        });
    }
})(jQuery);

$(function(){
    $("#3").resAutoLink();
});

jQueryプラグインとして書いているため、基本的にreplace()している行以外は、jQueryプラグインの作法として、主にreplace()のところを注目してください。

replace()メソッドを利用し、文字列の中から正規表現を利用し、「>>数字」となっているところを探し出し、<a>タグを付加したものに置き換えます。

()の中におけるマッチした文字列が$1として取り出せるため、「([0-9]+)」で数字の部分だけ$1で取り出せ、replace()の2番目のパラメータで利用できます。

そして、replace()の2番目のパラメータにおいて、「href=’#$1’」とすると、アンカーとしてレス番号をidに付加したタグに飛ぶことができます。

「>」は、「>」のことです。特殊文字のため、「>」としています。

以上のように、replace()メソッドで簡単に、文字列にリンクを自動付加できます。

これを利用すると、「http://」等で始まる文字列においても自動リンクできます。