imgタグなしで画像表示
JavaScriptでimgタグなしで画像URLから画像を表示したいです。
具体的には、次のビフォアフターのようにしたいです。
■ビフォア (タグなしのプレーンな文章)
サンプル文章サンプル文章サンプル文章。
http://sample.com/
サンプル文章サンプル文章サンプル文章。
http://sample.com/1.jpg 写真1
画像2 http://sample.com/2.png
画像3 http://sample.com/3.gif アニメーション
■アフター (JSでimgタグとaタグが自動挿入される)
サンプル文章サンプル文章サンプル文章。
<a href="http://sample.com/">http://sample.com/</a>
サンプル文章サンプル文章サンプル文章。
<img src="http://sample.com/1.jpg"> 写真1
画像2 <img src="http://sample.com/2.png">
画像3 <img src="http://sample.com/3.gif"> アニメーション
■第1希望 (ぜひとも)
画像の種類は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>'));});
■第2希望 (可能であれば)
上記コードはjQuery必須ですが、可能ならjQueryを使いたくないです。なので、上記コードをそのままつかわずに、aタグとimgタグを自動挿入されるようにしたいです。
文章の途中にURLや画像URLがあっても正しく処理してほしいです。
■第3希望 (お時間をさらにいただけるなら)
コードの簡単な解説をお願いしたいです。
上記コードであれば、「(http|https|ftp):\/\/」が「http;//」等をあらわすのを次のページで理解しました。
http://www.openspc2.org/JavaScript/Ajax/jQuery_p …
また、「$1」が検索対象の文字列であるのも理解しています。
「<a href="$1" target="_blank">$1</a>'」でハイパーリンクを生成しているのも理解しています。
簡単な解説をしていただけましたら、それを元に https://developer.mozilla.org/ja/docs/Web/JavaSc … で知見を深める所存です。
■m(__)m
そのままずばりの回答でなくとも、参考URLなどのご提案も助かります。
また、質問の意図がいまいち伝わりにくいようでしたら、その旨記載いただけましたら、加筆いたします。
どうぞよろしくお願いいたします。
No.1ベストアンサー
- 回答日時:
>~~であるのも理解しています。
とのことですので、ご質問の内容は、現在ご利用なさっているコードとほとんど同じような処理で実現できるのではないでしょうか?
> 可能ならjQueryを使いたくないです。
普通であれば、idは一意のはずなので、
>$("#main").each(function(){~~
のようにeachで処理する必要はないでしょう。
また、$("#main")の代わりに、document.getElementById()などを、html()の代わりにinnerHTMLを用いることでjQueryをはずすことも比較的簡単にできるものと思います。
>これと競合しないようにもしたいです。
別々に処理しないで、一連の処理のなかで場合分けして処理するのが効率的ではないでしょうか。
アドレスが画像(jpg、png、gifで終わる)だったら画像の処理を、それ以外ならリンクの処理をしてあげれば良さそうです。
ご提示のコードは、絶対アドレス指定のみを対象にしていますが、これに限定してよいのであれば、上記の方法で可能と思います。
対象に相対指定も含まれる場合は、urlであることの判定が一番難しいのではないかと。
すばらしい回答でした。
お陰様で全ての希望が実現しました。
>現在ご利用なさっているコードとほとんど同じような処理で実現できる
そのとおりでした。
>document.getElementById()などを、html()の代わりにinnerHTMLを用いることで
そのとおりでした。
>一連の処理のなかで場合分けして処理するのが効率的
そのとおりでした。
回答内容もさることながら、できるだけ自力でできるようにアドバイスしてくださる回答方法もすばらしかったです。
今回回答いただけたことで、新たな視点で問題を見つめなおすことができました。
ありがとうございました!
No.2
- 回答日時:
私的意見として
そういうものは、製作者側のエディタ(のマクロとか)でやってほしい。
個々の見る側で、いちいちそのようなスクリプトが走るのは、無駄。
jQuery を読み込んで処理してる間に・・・ごっほん!
この回答への補足
後出しで申し訳ないです。
HTMLタグをまったく分からない方が、ハイパーリンクと画像表示をできるだけ簡単に利用できる方法を模索しています。
また、想定している利用方法は小規模サイトの些細な更新で1ページあたり500文字以下程度です。
今回ご回答をいただけなければ、規模の大きなサイトでも今回のJSを使ってしまっていたと思います。
今後、製作者側で簡単に一括変換できる方法を検討します。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS サルワカさんの吹き出しのスタイルシートについて。 https://saruwakakun.com/h 2 2022/10/28 22:55
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- WordPress(ワードプレス) WordPressの記事の途中に差し込む 1 2023/06/29 11:18
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- 写真 写真(画像)編集スキルを質問する時 1 2022/12/07 14:14
- その他(プログラミング・Web制作) このWEB用語、WEB文章、意味が分かりますか? 理解できない人が多いようなんですが・・・ 7 2022/10/22 09:13
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
カラーミーショップのsectionル...
-
追加ボタンを押した際に ok ボ...
-
スマホ上で、左右スワイプで次...
-
読み込んだQRコードをフォーム...
-
変数宣言と初期値代入の場所に...
-
二次元配列を使って順位をだす...
-
イラストレーター、縦中横のシ...
-
条件に該当した時のみ定数を宣...
-
jQueryで同じクラス名のものを...
-
ジャバスクリプトについて。
-
プログラムについて。
-
Q&A掲示板の入力フォームに文字...
-
メールフォームの日付入力フォ...
-
iOSのみダブルタップが必要
-
jsで質問です。 displayプロパ...
-
var exports = exports || {}; ...
-
HTMLタグに複数のクラスを設定...
-
Googleフォームで選択肢に応じ...
-
変数名をどのようにつけるのが...
-
ボタンを押したあとに画像を表...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
二次元配列を使って順位をだす...
-
プログラムについて。
-
Q&A掲示板の入力フォームに文字...
-
メールフォームの日付入力フォ...
-
iOSのみダブルタップが必要
-
ジャバスクリプトについて。
-
画面遷移を行わずに同一ページ...
-
特定の文字列を複数抜き出した...
-
指定時間になったら、WEBサイト...
-
追加ボタンを押した際に ok ボ...
-
①入力フォーム→②確認表示画面→③...
-
スマホ上で、左右スワイプで次...
-
読み込んだQRコードをフォーム...
-
フロントエンドフレームワーク...
-
React hooksが値を返して配列変...
-
GASでGoogleフォームの自動返信...
-
初心者です。gulpでコンパイル...
-
階層別の組織図の自動作成について
-
HTMLで作った時報アプリが動き...
-
jQueryで同じクラス名のものを...
おすすめ情報