正規表現 URLが特定の拡張子のみ

Question

URLの拡張子が.jpegまたは.jpgまたは.pngまたは.gifのみimgタグに置換したいと考えています
下記ですとすべてのURLを画像にしてしまいます
「拡張子が.jpegまたは.jpgまたは.pngまたは.gifのみ」の場合どのように正規表現をかければいいでしょうか？

<script>
window.onload=function(){
var h="https://www.sony.net/ https://teratail-v2.storage.googleapis.com/assets/img/common/ttlHeader.png?1632990234197348";
h = h.replace(/(http(s)?://[a-zA-Z0-9-.!'()*;/?:@&=+$,%#]+)/gi, "<img src='$1'>");
alert(h);
//↑https://www.sony.net/ <img src='https://teratail-v2.storage.googleapis.com/assets/img/common/ttlHeader.png?1632990234197348'>としたい
}
</script>

Answer 1

<script>
window.onload=function(){
var h="https://www.sony.net/ https://teratail-v2.storage.googleapis.com/assets/img/common/ttlHeader.png?1632990234197348";
hm = h.match(/(http(s)?:[/][/][a-zA-Z0-9-.!'()*;/?:@&=+$,%#]+)/gi);
for(i=0;i<hm.length;i++){
if(hm[i].lastIndexOf('.png?')!=-1||hm[i].lastIndexOf('.jpg?')!=-1||hm[i].lastIndexOf('.jpeg?')!=-1||hm[i].lastIndexOf('.gif?')!=-1){
h=h.replace(hm[i],"<img src='"+hm[i]+"'>");
}
if(hm[i].lastIndexOf('.png')+4==hm[i].length||hm[i].lastIndexOf('.jpg?')+4==hm[i].length||hm[i].lastIndexOf('.jpeg?')+5==hm[i].length||hm[i].lastIndexOf('.gif?')+4==hm[i].length){
h=h.replace(hm[i],"<img src='"+hm[i]+"'>");
}
}
alert(h);
//↑https://www.sony.net/ <img src='https://teratail-v2.storage.googleapis.com/assets/img/common/ttlHeader.png?1632990234197348'>としたい
}
</script>

これで出来ると思います

Answer 2

<script>
window.onload=function(){
var h="https://www.sony.net/ https://teratail-v2.storage.googleapis.com/assets/img/common/ttlHeader.png?1632990234197348";
h = h.replace(/\d*$/, "");
if (h.match(/.(png|jpg|jpeg|gif)$/)) {
  h = "<img src='" + h + "'>"
  alert(h);
  //↑https://www.sony.net/ <img src='https://teratail- 
 v2.storage.googleapis.com/assets/img/common/ttlHeader.png?1632990234197348'>としたい
}
</script>

これでどうでしょうか？

Comments

[akatsuka1794]

実行した結果
<img src='https://www.sony.net/ https://teratail-v2.storage.googleapis.com/assets/img/common/ttlHeader.png?1632990234197348'>
このようになってしまいました