JavaScript ile HTML İmage Tagından Regex ile Resim Url Adresini Alma

Merhaba arkadaşlar bugün sizlere her zaman karşımıza çıkan bir ihtiyaçtan bahsedip ufak bir ipucu vereceğim.

Elimizde html bir image kodu string olarak yer almaktadır ve biz buradaki resim url sini yani src deki url adresini almak istiyoruz.

Bunun için çok bilinen ve bize kolaylık sağlayan regex yöntemi ile bu adresi almayı anlatacağım.

</p>
<p>var image = &quot;&lt;img alt='' src='http://api.com/images/UID' /&gt;&lt;br/&gt;Some plain text&lt;br/&gt;&lt;a href='http://www.google.com'&gt;http://www.google.com&lt;/a&gt;&quot;</p>
<p>

İlk olarak elimizde böyle bir örnek image html kodumuzun olduğunu düşünelim ve burada ki src kodunu almaya çalıştığımızı farz edelim.

</p>
<p>var image = &quot;&lt;img alt='' src='http://api.com/images/UID' /&gt;&lt;br/&gt;Some plain text&lt;br/&gt;&lt;a href='http://www.google.com'&gt;http://www.google.com&lt;/a&gt;&quot;;</p>
<p>var regex = /&lt;img.*?src='(.*?)'/;<br />
var src = regex.exec(image)[1];</p>
<p>

Bu şekilde bir regex formülü kullanarak src değişkenimize otomatik olarak img tagımızdaki src adresini almış bulunmaktayız.

Burada dikkat etmeniz gereken bir noktada img tagınızda src de kullanılan belirteç ayraçlarıdır. Yani src den sonra kod tek tırnak mı (‘) yoksa çift tırnak (“) arasında mı verilmiş ona dikkat etmeniz gerekmektedir.

Yukarıda ki örneğimizde gördüğünüz gibi tek tırmak olarak verilmiştir. Eğer bu çift tırnak olsaydı regex kodumuz aşağıdaki gibi olacaktır.

</p>
<p>var regex = /&lt;img.*?src=&quot;(.*?)&quot;/;</p>
<p>

Aslında gördüğünü gibi regex kodumda sadece istediğim resim url sinin src= den sonraki tek tırnaklar arasındaki değil çift tırnaklar arasındaki kodun olduğunu belirmek oldu.

Bir Cevap Yazın