Skip to content

jQuery ile Yazıları Değiştirme

jQuery ile yazıları değiştirme olarak başlık attım fakat işin aslı JavaScript ile yazıları değiştirme olmalıydı. Çünkü bu işlemi yaparken .replace() fonksiyonunu kullanacağız ki bu JavaScript fonksiyonudur.

Aslında göstereceğim işlem PHP’nin str_replace() fonksiyonuyla aynı. Bir inputun veya yazı bloğunun içinde aradığınız terimi seçtiğiniz bir başka terimle değiştirmeyi göstereceğim. Aşağıdaki örnek’te inputa girilen sayıdaki “,” işaretini “.” olarak güncelleyeceğiz.

<input type="text" name="fiyat" value="144,90">
var fiyat = $("input[name='fiyat']").val(); // Input daki fiyat değerini aldık
var NoktaliFiyat = fiyat.replace(",", "."); // Virgülü nokta ile değiştirdik.

Bu şekilde aradığımız terimi değiştirdik. Fakat bu şekilde sadece ilk gördüğü “,” işaretini “.” olarak değiştirecektir. Bütün “,”leri değiştirmek için düzenli ifadelerden (regular expressions) kullanmalıyız. Şöyle ki:

var fiyat = $("input[name='fiyat']").val(); // Input daki fiyat değerini aldık
var NoktaliFiyat = fiyat.replace(/,/g, "."); // Virgülü nokta ile değiştirdik.

Burada /,/g yazarak bütün “,” işaretlerini “.” işaretine çeviriyoruz. g düzenli ifademize global özelliği ekliyor. Bu sayede tamamında arama yapılıyor.

Peki bir soru daha! Düzenli ifadelerle verdiğimiz terimi aramayı gördük fakat direk ifade yerine bir değişken kullanabilir miydik? Tabii ki evet, o da şu şekilde:

var fiyat = $("input[name='fiyat']").val(); // Input daki fiyat değerini aldık
var aranan = ","; // Aranan terimi değişkende belirttik
var regex = new RegExp('{'+aranan+'}', "igm"); // Aranan terimin RexExpini oluşturduk
var NoktaliFiyat = fiyat.replace(regex, "."); // Yeni haliyle tekrar değiştirme işlemini yaptık.

Faydalı olup işinize yaraması dileğiyle, sorularınızı yorum olarak sorabilirsiniz.

TR Kodlama GitHub'da!

TR Kodlama'da yer alan makaleleri GitHub üzerinden düzenleyebileceğinizi biliyor muyudunuz? Harika değil mi? Bu makale ile ilgili düzenleme yapmak isterseniz aşağıdaki butona tıklayınız!

GitHub'da Görüntüle ve Düzenle!