jquery 自動リンクの決定版

2014年10月20日更新 view: 29 view
http://jquerymobile.com/demos/1.0/docs/_assets/images/jquery-logo.png

jqueryで自動リンクがうまくいかない。

全てがテキストのみの要素を置換するなら

$(this).html( $(this).html().replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g, '<a href="$1">$1</a> ') );

で置換できる。

画像や アフィリエイトタグまで置換されてしまう

色々な置換ライブラリを使ってみたが、要素内にすでに a タグや img タグがあるとそれすら置き換えられてしまう。
☓これだとうまく動かない。

http://www.yahoo.co.jp
<a href="http://www.yahoo.co.jp">http://www.yahoo.co.jp</a>
<img src="http://www.hoge.com/test.gif">

○これならうまくうごく

http://www.yahoo.co.jp
http://www.google.co.jp

でも前者で動かしたい。

そんな場合は、こうする。
今回は .article 内の全てのリンクを置き換える。
但し、 img タグは置き換えない

        $('.article *').each(function (i, v) {
            if(!$(this).html().match(/img/)){
                $(this).html( $(this).html().replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g, '<a href="$1">$1</a> ') );
            }
        });

これで img を含むリンクは置き換えなくなります。

指定箇所のリンクを解除したい

さらに pre タグ内のリンクは解除したい。
そんな時は

$(".article pre a").each(function() {
  $(this).contents().unwrap();
});
スポンサードリンク

で解除することができます。

スポンサードリンク

関連記事

関連カテゴリ