文章内のURLを自動リンク化する方法

Question

http://kachibito.net/snippets/replace-plain-urls-with-links

こちらのページを参考に、URLテキストを自動リンクかする方法を試したのですが、
絶対パスで読み込んでいるimgタグも対象になってしまいます。

<img src="http://hogehogehoge/piyo.jpg" alt="">

http://huga/

  var exp = /(\b(https?|ftp|file)://[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/gi;
  $("body").html(
    $("body")
      .html()
      .replace(exp, "<a href='$1'>$1</a>")
  );

▽結果

失敗
<img src="<a href='http://hogehogehoge/piyo.jpg'>http://hogehogehoge/piyo.jpg</a>" alt="">

こちらは成功
<a href="http://huga/">http://huga/</a>

spanやimg内に記述したURLについてはJSの対象外としたいのですが、
どのように記述すればいいのでしょうか。。

お知恵をお借りしたく思います。
何卒よろしくお願いいたします。

Comments

[Lhankor_Mhy]

『spanやimg内に記述したURLについてはJSの対象外としたい』とのことですが、それだけですか？

たとえば、
<script>
var URL = "http://example.com/";
</script>
などはどうしますか？

[tekumak]

書いていただいた内容の意図がよく分かっていないので返答がずれてしまっているかもしれないのですが、
今回はCMSの記事内に記述されたURLのみが対象なので、
ご回答いただいた内容で十分でした。
ありがとうございます！

[Lhankor_Mhy]

スクリプトが動かなくなる心配をしてましたが、ご解決して何よりです。

Answer 1

正規表現で前後に特定の文字があるか無いかの判定ができます。
前後にあったりなかったりの正規表現 | つぼログ。

例えばimgタグのsrc="の文字列が先ほどの正規表現の前に無い場合のみマッチさせるとしたら以下のようにすれば可能かと思います。

var exp = /((?<!src=")\b(https?|ftp|file)://[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/gi;

spanに関しても同じ要領で可能だと思います。

Comments

[tekumak]

ありがとうございます！無事実装できました。
正規表現というのですね。勉強になりました。ありがとうございました。