ウィジウィグエディタに入れたURL文字列を自動でリンク付きにする

リンク貼るのめんどい

ウィジウィグエディタ上で「http://example.com/...」という感じで、
URL文字列を張ってそれにリンクを張るときがあるのですが、それが煩わしい。
今回はそれを自動化する実装をやってみます。

今回想定するのは、次のようなウィジウィグエディタ上で入力されたURL文字列です。

<p>http://example.com</p>

正規表現置き換えを使った自動リンク付加実装の試行

具体的には、MTテンプレート内にて、
<mt:entryBody /> にregex_replaceモディファイアによる正規表現を適用する事で、
リンク付きに変更します。

まず、次のように指定してみます。

<mt:entryBody regex_replace='/([^"'])(https?:\/\/[0-9a-zA-Z_\-\.\/\?=%]+)([<¥r¥n])/g','$1<a href="$2">$2</a>$3' />

パターンの冒頭で[^"']を指定しているのは、次のようなhtmlタグの属性値を誤って変換しない為の措置です。

<a href="http://xxxx.com">
<a href='http://xxxx.com'>

また、末尾の[<¥r¥n]は、次のような文章内のURLを変換せず、
URLのみが書かれた行だけをリンクに変換する為のものです。

ウィジウィグエディタ上で「http://example.com/...」という感じで、 ⬅️変換しない

http://example.com/... ⬅️変換する

しかし、うまくいきません。Sublimeとか正規表現の使えるエディタで検証すると正規表現は認識されるのですが、、、

正規表現のパターン文字列は一旦変数に格納して使う

試行錯誤の結果、次の記述で上手く行くようになりました。

<mt:setVarBlock name="var_regex_ptn">/([^"'])(https?:\/\/[0-9a-zA-Z_\-\.\/\?=%]+)([<¥r¥n])/g</mt:setVarBlock>
<mt:EntryBody regex_replace='$var_regex_ptn','$1<a href="$2">$2</a>$3' />

肝になるのは、一旦変数(上述のvar_regex_ptn)に格納する事のようです。

ちなみに、本文内にスクリプトのコードがあるような場合は、この方法で誤変換が起きる事が想定されるので、ご注意を。

関連する情報

参考にした情報

株式会社 スカイアーク
regex_replaceを安全簡潔に書く小技
http://www.mtcms.jp/movabletype-blog/tech/201104222143.html

追記

2014/05/10

MTテンプレート内で正規表現を変数に代入する箇所において、

<mt:setVarBlock name="var_regex_ptn">/([^"'])(https?:\/\/[0-9a-zA-Z_\-\.\/\?=%]+)([<¥r¥n])/g</mt:setVarBlock>

[0-9a-zA-Z_\-\.\/\?=%] に「~」を追加しないとURLに変換できない場合がありました。
それを踏まえると、次の通りになります。「~」が増えただけですが。

<mt:setVarBlock name="var_regex_ptn">/([^"'])(https?:\/\/[0-9a-zA-Z_\-\.\/\?=%~]+)([<¥r¥n])/g</mt:setVarBlock>

関連するタグ

MTML, MTOS5.2.10, TinyMCE