imgタグなしで画像表示

質問

imgタグなしで画像表示

JavaScriptでimgタグなしで画像URLから画像を表示したいです。
具体的には、次のビフォアフターのようにしたいです。

■ビフォア (タグなしのプレーンな文章)

サンプル文章サンプル文章サンプル文章。
http://sample.com/
サンプル文章サンプル文章サンプル文章。
http://sample.com/1.jpg 写真１
画像２ http://sample.com/2.png
画像３ http://sample.com/3.gif アニメーション

■アフター (JSでimgタグとaタグが自動挿入される)

サンプル文章サンプル文章サンプル文章。
<a href="http://sample.com/">http://sample.com/</a>
サンプル文章サンプル文章サンプル文章。
<img src="http://sample.com/1.jpg"> 写真１
画像２ <img src="http://sample.com/2.png">
画像３ <img src="http://sample.com/3.gif"> アニメーション

■第１希望 （ぜひとも）

画像の種類はjpg、png、gifに対応可能にしたいです。
現在、URLを自動でハイパーリンク有りに変換していますので、これと競合しないようにもしたいです。
次のコードを使っています。
$("#main").each(function(){$(this).html($(this).html().replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g,'<a href="$1" target="_blank">$1</a>'));});

■第２希望 （可能であれば）

上記コードはjQuery必須ですが、可能ならjQueryを使いたくないです。なので、上記コードをそのままつかわずに、aタグとimgタグを自動挿入されるようにしたいです。
文章の途中にURLや画像URLがあっても正しく処理してほしいです。

■第３希望 （お時間をさらにいただけるなら）

コードの簡単な解説をお願いしたいです。
上記コードであれば、「(http|https|ftp):\/\/」が「http;//」等をあらわすのを次のページで理解しました。
http://www.openspc2.org/JavaScript/Ajax/jQuery_plugin/chapter8/index.html
また、「$1」が検索対象の文字列であるのも理解しています。
「<a href="$1" target="_blank">$1</a>'」でハイパーリンクを生成しているのも理解しています。
簡単な解説をしていただけましたら、それを元に https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions で知見を深める所存です。

■m(__)m

そのままずばりの回答でなくとも、参考URLなどのご提案も助かります。
また、質問の意図がいまいち伝わりにくいようでしたら、その旨記載いただけましたら、加筆いたします。

どうぞよろしくお願いいたします。

回答No.1

fujillin · ベストアンサー

＞～～であるのも理解しています。
とのことですので、ご質問の内容は、現在ご利用なさっているコードとほとんど同じような処理で実現できるのではないでしょうか？

＞ 可能ならjQueryを使いたくないです。
普通であれば、idは一意のはずなので、
＞$("#main").each(function(){～～
のようにeachで処理する必要はないでしょう。
また、$("#main")の代わりに、document.getElementById()などを、html()の代わりにinnerHTMLを用いることでjQueryをはずすことも比較的簡単にできるものと思います。

＞これと競合しないようにもしたいです。
別々に処理しないで、一連の処理のなかで場合分けして処理するのが効率的ではないでしょうか。
アドレスが画像（jpg、png、gifで終わる）だったら画像の処理を、それ以外ならリンクの処理をしてあげれば良さそうです。

ご提示のコードは、絶対アドレス指定のみを対象にしていますが、これに限定してよいのであれば、上記の方法で可能と思います。
対象に相対指定も含まれる場合は、urlであることの判定が一番難しいのではないかと。

お礼

すばらしい回答でした。
お陰様で全ての希望が実現しました。

＞現在ご利用なさっているコードとほとんど同じような処理で実現できる

そのとおりでした。

＞document.getElementById()などを、html()の代わりにinnerHTMLを用いることで

そのとおりでした。

＞一連の処理のなかで場合分けして処理するのが効率的

そのとおりでした。

回答内容もさることながら、できるだけ自力でできるようにアドバイスしてくださる回答方法もすばらしかったです。
今回回答いただけたことで、新たな視点で問題を見つめなおすことができました。

ありがとうございました！

回答No.2

babu_baboo

私的意見として

そういうものは、製作者側のエディタ（のマクロとか）でやってほしい。
個々の見る側で、いちいちそのようなスクリプトが走るのは、無駄。
jQuery を読み込んで処理してる間に・・・ごっほん！

お礼

おっしゃるとおりです。
そのような考えがすっぽり抜けていました。
多角的見地からのご回答ありがとうございました。

補足

後出しで申し訳ないです。
HTMLタグをまったく分からない方が、ハイパーリンクと画像表示をできるだけ簡単に利用できる方法を模索しています。
また、想定している利用方法は小規模サイトの些細な更新で1ページあたり500文字以下程度です。

今回ご回答をいただけなければ、規模の大きなサイトでも今回のJSを使ってしまっていたと思います。
今後、製作者側で簡単に一括変換できる方法を検討します。
ありがとうございました。