WEBサイトならリンク、画像ファイルなら画像タグで出力したい

前提・実現したいこと

WEBサイトならリンク、画像ファイルなら画像タグで出力したい
JavaScriptのマッチで画像URLは画像タグ、WEBサイトはリンクタグにそれぞれ置換する事は可能でしょうか？
ソースコードの2行を混ぜたような書き方はできるのでしょうか？

該当のソースコード

JavaScript
1url="https://～.jpg?6a4b3c2d4e5 画像とリンク https://yahoo.co.jp/";
2url = url.replace(/(http(s)?://[a-zA-Z0-9-.!'()*;/?:_~@&=+$,%#]+).jpg/gi, '<img src="$1">');
3url = url.replace(/(http(s)?://[a-zA-Z0-9-.!'()*;/?:_~@&=+$,%#]+)/gi, '<a href="$1">リンク</a>');

補足情報（FW/ツールのバージョンなど）

urlのhttps://～.jpg?6a4b3c2d4e5の乱字の部分はキャッシュ対策として付加されているもので毎回変わります

行動規範の内容に同意します

回答2件

ソースコードの2行を混ぜたような書き方

現在のブラウザはどれも、 HTMLAnchorElement を介するだけでURL解析できますので、 pathname の拡張子で切り分ける方法を使えば、複雑な正規表現を書く必要はなくなっています。

MDN の HTMLAnchorElement の説明にも HTMLHyperlinkElementUtils を継承している旨の説明がありますので、例えば以下のような解析例で ?cacheBustingNumber(乱数) 部分を無視した切り分けもできます。

javascript
1var checkURL = ( url ) => {
2
3  // HTMLHyperlinkElementUtils を介したURL解析例
4  let a = Object.assign( document.createElement("A"), {
5    href: url
6  });
7
8  // 解析の確認
9  let { href, pathname, search, hash } = a;
10  console.log(`href: ${href}`);
11  console.log(`path:"${pathname}", search:"${search}", hash:"${hash}"`);
12　if( pathname.match(/.(jpg|png|gif|svg)$/i) ) {
13    console.log("img タグが良いっぽい")
14  }
15  else {
16    console.log("a タグが良いっぽい")
17  }
18
19}
20checkURL( "https://example.com/path/to/page.html?12345");
21checkURL( "https://example.com/path/to/page.jpg?12345");

古いブラウザ用に、正規表現で解析するコードを書いたことはあります。CODE PEN parseURL

投稿2020/03/08 07:02

編集2020/03/08 07:31

AkitoshiManabe

総合スコア5434

色々方法は考えられますが、確実なのはAjaxでPHPにデータを渡してリンク先のファイルの判別をすることではないでしょうか？

書いてみたけど実際には使わないでください。

あくまでも、こんな感じの処理かな。というふうに書いてます。

HTML
1
2<!DOCTYPE html>
3<meta charset=UTF-8>
4<input type=text id=url name=url>
5<button id=ajax>検証</button>
6<div id=result></div>
7<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
8<script>
9$(function(){
10  $('#ajax').on('click',function(){
11    $.ajax({
12      url:'', //PHPのファイル名を入れてください
13      type:'POST',
14      data:{
15        'url':$('#url').val(),
16      }
17    }).done( (data) => {
18      $('#result').html(data);
19      console.log(data);
20    }).fail( (data) => {
21      alert('ERROR!');
22    });
23  });
24});
25</script>
26

PHP
1
2<?php
3if($_POST['url']){
4  $response = get_headers($_POST['url'], 1);
5  if(strpos($response["Content-Type"],'image') !== false){
6    echo '<img src=',$_POST['url'],'>';
7  }else{
8    echo '<a href=',$_POST['url'],'>サイト</a>';;
9  }
10}
11