jQueryでTwitterアカウント名に自動リンクをつける

jQueryでTwitterアカウント名に自動リンク

かちびと.netさんの記事を参考にjQueryでやってみました。

WordPressで記事内に書かれたTwitterアカウント名を、@Anywhereを使わずに自動リンク化する

@Anywhereはよくわかりませんが、jQueryでぺって貼付けるだけなのでこっちのほうが楽かもしれません。

WordPressやphpが使えない環境でも使えて、DOM指定ができるメリットがあります。

jQueryコード


// http://fukuyama.co/addtwlink
jQuery(document).ready(function($) {
  // 要素を指定
  $('p').each(function() {
    var _html;
    _html = $(this).html().replace(/(^|\>)([^\<]*\@[^\<]*)(\<|$)/g, function() {
      return arguments[1]
           + arguments[2]
             .replace(/\@([a-z0-9\_]+)(\.)?/gi, function() {
               if(arguments[2]) return arguments[0];
               return '<a href="https://www.twitter.com/'
                      + arguments[1] + '" target="_blank" class="twlink">@'
                      + arguments[1] + '</a>';
             })
           + arguments[3];
    });
    $(this).html(_html);
  });
});

結果

補足

要素を指定するだけで使えると思います。

classやtarget属性は自由に設定してください。

PHPは変換してから出力するのに対して、jQueryは出力されてから置換するので他のjsと干渉する可能性があります。(setTimeoutで実行タイミングをずらすといいかも)

結局のところ自分でタグ付けするのが一番ですね。