Merhaba, Bu yazıda JavaScript tarafından tanımlanmış metin fonksiyonlarını göreceğiz.

Uzunluk Fonksiyonu (length)

Verinin kaç karakter olduğunu söyleyen fonksiyondur.

var metin = 'JavaScript öğreniyorum';
document.write(metin.length);

Burada 22 karakterlik ‘JavaScript öğreniyorum’ metninin .length fonksiyonu ile karakter sayısını ekrana yazdırdık.

Metni Kalın Yazmak (bold)

HTML’de <b> kullanarak yaptığımız yazı kalınlaştırma işlemini JavaScript’te .bold fonksiyonu ile yapıyoruz.

var dil = 'JavaScript';
document.write('Bugün ' + dil.bold() + ' öğreniyorum');

Metni İtalik Yazmak (italics)

HTML’de <i>kullanarak yaptığımız eğik (italik) yazma işlemini JavaScript’te .italicsfonksiyonu ile yapıyoruz.

var dil = 'JavaScript';
document.write('Bugün ' + dil.italics() + ' öğreniyorum');

Metnin Üstünü Çizmek (strike)

HTML’de <strike>kullanarak yaptığımız üstünü çizme işlemini JavaScript’te de .strikefonksiyonu ile yapıyoruz.

var dil = ' JavaScript';
var digerdil = 'CSS değil';
document.write('Bugün ' +digerdil.strike() + dil.bold() + ' öğreniyorum');

Metni Daha Büyük (big) veya Daha Küçük (small) Yazmak

HTML’de küçük yazmak için kullandığımız <small>yerine JavaScript’te .smallfonksiyonunu, HTML’de büyük yazmak için kullandığımız <big>yerine JavaScript’te .bigkullanıyoruz.

var dil = ' JavaScript';
var digerdil = 'CSS değil';
document.write('Bugün ' + digerdil.small() + dil.big() + ' öğreniyorum');

Büyük (toUpperCase) / Küçük (toLowerCase) Harflerle Yazmak

JavaScript’te yazıları büyük harfler ile yazmak için toUpperCasefonksiyonunu, küçük harfler ile yazmak için toLowerCasefonksiyonunu kullanıyoruz.

var dil = 'JavaScript';
document.write('Büyük Harflerle: ' + dil.toUpperCase() + '<br>Küçük Harflerle: ' + dil.toLowerCase());

Normalde J ve S harfleri büyük olmasına karşın toUpperCasefonksiyonuyla yazdığımızda tamamı büyük yazıldı, toLowerCasefonksiyonuyla yazdığımızda tamamı küçük harflerle yazıldı.

Metin Yazı Boyutu Ayarlamak (fontsize(deger))

JavaScript’te metnin boyutunu ayarlamak için bir değer ile birlikte fontsize(deger)fonksiyonunu kullanırız. Vereceğimiz değer en küçük 1 en büyük 7 olabilir.

var dil = 'JavaScript';
document.write('Boyut 1: ' + dil.fontsize(1) + '<br>Boyut 4: ' + dil.fontsize(4) + '<br>Boyut 7: ' + dil.fontsize(7));

Metin Rengini Ayarlamak (fontcolor(renk))

JavaScript’te metnin rengini ayarlamak için bir renk değeri ile birlikte fontcolor('renk')fonksiyonunu kullanırız. Renk isim – kodları CSS Renkleridir.

var dil = 'JavaScript';
document.write('Blue: ' + dil.fontcolor('blue') + '<br>Dark Red: ' + dil.fontcolor('darkred') + '<br>Rebecca Purple: ' + dil.fontcolor('rebeccapurple'));

Metne Link Vermek (link(URL))

JavaScript ile bir metne link vermek için link('url')fonksiyonunu kullanırız.

var site = 'JavaScript.Com';
document.write('JavaScript öğrenmek için ' + site.link('https://www.javascript.com/') + ' web sitesini de kullanabilirsiniz.');

Alt (sub) ve Üst (sup) Simgeler

HTML’de de aynı işlevi gören <sub>– <sup>öğeleri JavaScript’te de aynı isimler ile .subve .supalt öğe – üst öğe yazmakta kullanılıyor. Formüller, üslü sayılar vb alt ve üstte karakter bulunması gereken durumlarda kullanılabilir.

var sayi = '2';
document.write('H' + sayi.sub() + 'O');
document.write('<br><br>');
document.write('3' + sayi.sup());

Belirli Bir İndisteki Karakteri Seçmek (charAt(indis))

var isim = 'Steve Jobs';
document.write(isim.charAt(3));

İndisi saymaya sıfırdan başlayacağını unutmamak gerekir. 0’dan başlayacağı için 3.indisteki karakter örneğimizde v olarak çıktı verir.

Metinleri Birleştirmek (concat(metin))

Metinleri birleştirmek için concat(metin)fonksiyonu kullanılır.

var isim = 'Mustafa';
document.write(isim.concat(' ','Kemal',' ','Atatürk'));

Belirli Bir İndisteki Karakterin ASCII Karşılığını Bulmak (charCodeAt(indis))

Karakterlerin ASCII karşılıkları ile ilgili daha önce bir yazı paylaşmıştık. Bu yazımıda karakterlerin ASCII karakterlerini bir tabloda vermiştik ancak JavaScript’te de karakterlerin ASCII karşılıklarını bulmak için kullanabileceğimiz bir fonksiyon mevcut.

var isim = 'Mustafa';
document.write(isim.charCodeAt(2));

Örneğimizde 2. karakter olan ‘s’ için ASCII karşılığı olan 115 değerini verir.

Belirli Bir Karakterin Bulunduğu İndisi Bulmak (indexOf(deger,baslangic))

Metin içerisinde belirli bir karakterin yerini bulmak için indexOf(deger,baslangic)fonksiyonunu kullanırız.

var isim='Mustafa';
document.write(isim.indexOf('a'));

Bir başlangıç noktası belirtilmediğinde 0. karakterden itibaren arama yapar. Eğer başlangıç noktası belirtilirse başlangıç noktasından sonraki ilk eşleşen karakterin indisini verir.

var isim='Mustafa';
document.write(isim.indexOf('a',5));

Aynı fonksiyonu dizilerde arama yapmak için de kullanabiliriz.

var fruits = ["Muz", "Portakal", "Elma", "Mango"];
var a = fruits.indexOf("Elma");
document.write(a);

Belirli Bir Karakterin Bulunduğu İndisi Sondan Bulmak (lastIndexOf(deger,baslangic))

indexOf()fonksiyonunun yaptığı indis bulma işlemini metnin sonundan doğru yapabilimek için lastIndexOf(deger,baslangic)fonksiyonunu kullanırız. Burada 1 tane örnek kullanacağız, indexOf için geçerli örnekler lastIndexOf için de geçerlidir.

var isim='Mustafa';
document.write(isim.lastIndexOf('a'));

Burada scriptimiz 6 sonucunu verecektir. Çünkü sondan doğru aradığında bulduğu ilk a karakteri 6. indistedir.

Metinden Belirli Aralıktaki Karakteri Alma (substring(baslangic,son))

JavaScript’teki belirli karakter indisi aralığındaki karakterleri almak istersek substring(baslangic,son)fonksiyonunu kullanabiliriz.

var isim='Adana';
document.write(isim.substring(2, 5));

Örnekte karakterin 2 numaralı indisteki a harfi ile başlayıp 5 numaralı indisteki a harfi ile biter ve ortaya ‘ana’ ifadesi çıkar.

Metinden Beliri Sayıda Karakteri Alma (substr(baslangic,adet))

Bu fonksiyon da metinden belirli karakterleri almak için kullanılır ancak substringfonksiyonundan farklı olarak başlangıç noktasından sonra kaç karakter alacağını belirtir.

var dil='JavaScript';
document.write(dil.substr(2, 5));

Örnekte fonksiyonumuz 2 numaralı indisteki (v) başlayıp 5 karakter almıştır ve ekrana vaScr çıktısı verir.

Metni Diziye Dönüştürmek (split(ayrac,limit))

Bu fonksiyon verilen bir metni diziye dönüştürmek için kullanılır. Belirli bir karakter ayraç olarak seçilir ve bu ayraçlar arasında kalan öbekler dizi elemanı olarak atanır. Fonksiyonumuzun ikinci parametresinde belirtilen limit de kaç adet dizi elemanı oluşturacağını söyler.

var metin = "Bu gün JavaScript fonksiyonlarını öğreniyorum?";
// boşluğu ayraç olarak kullanıp kelime kelime ayırıyoruz
document.write(metin.split(" "));
document.write('<br><br>');

// ayraçı boş bırakıp her bir karakteri (harf-sayı-boşluk) ayırıyoruz
document.write(metin.split(""));
document.write('<br><br>');

// boşluğu ayraç kullanıyoruz fakat sadece 3 öğeyi istiyoruz
document.write(metin.split(" ",3));
document.write('<br><br>');

// i harfini ayraç olarak kullanıyoruz
document.write(metin.split("i"));

Dizi Öğelerini Metne Dönüştürmek (join(ayrac))

Metni diziye dönüştürme fonksiyonumuzun tam tersi olarak dizi öğelerini tek bir metin haline dönüştürmek için join(ayrac)fonksiyonunu kullanırız.

var arabalar = ["Fiat", "Peugeot", "Audi", "Renault"];
// Varsayılan olarak öğeleri virgül ile birleştirir
document.write(arabalar.join());
document.write('<br><br>');

// Öğeleri ' ve ' ile birleştiriyoruz
document.write(arabalar.join(" ve "));
document.write('<br><br>');

// Öğeleri boşlukla birleştiriyoruz
document.write(arabalar.join(" "));
document.write('<br><br>');

Metnin İçerisinden Bir İfadeyi Bulmak (search(ifade))

Metin içerisinde belirli bir ifadeyi arar ve ifadeyi bulabilirse ilk karakterinin indisini verir. Eğer ifade metin içerisinde bulunamazsa -1 değerini verir.

var metin = "JavaScript öğreniyorum!"; 
document.write(metin.search("Script"));
document.write('<br><br>');

document.write(metin.search("CSS"));

İlk aradığımız Script kelimesi metin içerisinde bulunduğu için başlangıç indisi olan 4 sonucunu verdi. İkinci aradığımız CSS kelimesi metin içerisinde bulunamadığı için -1 sonucunu verdi.

Metin İçerisinde Metin Değiştirme (replace(eski,yeni))

Metnin içerisinden belirli bir ifadeyi değiştirmek için kullanırız. Bunu farklı fonksiyonlar da kullanarak örnekleyelim:

<!DOCTYPE html>
<html>
<body>

<p id="ornek">Benim ismim Oğuzhan Tetik</p>

<button onclick="fonksiyonum()">Doğrusunu Göster</button>

<script>
function fonksiyonum() {
  var metin = document.getElementById("ornek").innerHTML; 
  var res = metin.replace("han", " Kağan");
  document.getElementById("ornek").innerHTML = res;
}
</script>

</body>
</html>