jQuery ile inputa girilen Türkçe ve özel karakterleri, büyük harfleri, boşlukları eş zamanlı temizlemek

Konu başlığına bir kere daha baktım da sanki böyle “Balya balya kod geliyor” gibi bir imaj uyandırmış. Evet esasen tüm bu işleri yapacağız ama gerçekten olabildiğince kısa, hatta birkaç satır sayılabilecek orta düzey kodlarla. Gözünüz korkmasın yani.

Sabırsız olduğum için olsa gerek; her ne kadar iyi bir anlatıcı olmasam da eskiden sitede bu tür konulara daha fazla yer vermeye çalışırdım. Yine şevkimden bir şey kaybetmiş değilim ancak son zamanlarda ofiste yoğun projeler üzerinde çalıştığımız için gönül eve gelince FIFA 2013 oynamak, kafa neyin dağıtmak istiyor. Harbi diyorum, Regina ve Inter’de bir müddet top koşturduktan sonra an itibariyle Paris SG’de 9 numaralı formamla forvet oynuyorum. 28 milyon dolarlık transfer ücretimi ödeyebilecek olan herkesle masaya oturmaya hazırım.

İşimize dönecek olursak. Özetle alan adı gibi işlerle uğraşanların sıklıkla ihtiyaç duyabilecekleri bir input temizleme işlevinden söz ediyoruz. Bu işlevin üstlendiği vazife, olabildiğince açıklayıcı olmaya çalıştığım başlıkta da belirttiğim üzere şöyle:

  1. Girilen değerin içindeki boşlukları temizlemek ve tire işareti (-) ile değiştirmek
  2. Büyük ve küçük Türkçe karakterleri (ç,ş,ö,ü,ğ,ı) İngilizce karşılıklarına (c,s,o,u,g,i) çevirmek ve kullanılmasına izin verdiklerimiz haricinde özel karakterleri (%&#$½ vb.) temizlemek
  3. Değeri tamamen küçük harfli yapıya dönüştürmek

Yani kullanıcı form içerisinde yer alan, belirlediğimiz inputa “Şaşkın Öğretmen Çağırdı!” yazmak istediğinde bu değer eş zamanlı olarak “saskin-ogretmen-cagirdi” şeklinde temiz bir değere dönüştürülüyor.

Sözü fazla uzatmadan kodlarımıza geçelim. Neyin ne olduğunu, hangi satırın ne işe yaradığını dilim döndüğünce kodların içinde ifade etmeye çalıştım.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
$(document).ready(function(){

    /*
        Input içinde bir tuşa basıldığında fonksiyonumuzu çağırıyoruz
    */

    $("#input").keyup(function() {
        clearInput($(this).attr('id'));
    });

    /*
        Kullanıcı inputtan ayrıldığında yine fonksiyonumuzu çağırıyoruz.
        (Kopyala - yapıştır işlemlerinde bug çıkmaması için)
     */

    $("#input").focusout(function() {
        clearInput($(this).attr('id'));
    });

}); //doc ready end

    /* Tüm işi yapan fonksiyonumuz */
    function clearInput(id) {

        /*
         Türkçe karakterlerin değiştirilecekleri karşılıklarını tanımlıyoruz.
         */

        var charMap = {Ç:'c',Ö:'o',Ş:'s',İ:'i',I:'i',Ü:'u',Ğ:'g',ç:'c',ö:'o',ş:'s',ı:'i',ü:'u',ğ:'g'};

        /*
         Anlık input değerini (value) alıyoruz.
         */

        var str = $("#" + id).val();

        /*
         Inputa girilen Türkçe karakterleri yukarıda tanımladığımız değerlerle değiştiriyoruz.
         Bu zahmete katlanmamızın nedeni JavaScript ile Türkçe karakterleri sağlıklı biçimde,
         herhangi bir bug oluşmasına mahal vermeden değiştirebilmek.
         */

        str_array = str.split('');

        for(var i=0, len = str_array.length; i < len; i++) {
            str_array[i] = charMap[ str_array[i] ] || str_array[i];
        }

        str = str_array.join('');

        /*
         Alfanumerik olmayan özel karakterlerin temizlendiği yeni bir value oluşturuyoruz:
         1. replace(" ","-") ile boşlukları tire (-) işaretiyle değiştiriyoruz.
         2. replace("--","-") ile iki tane yan yana (--) tire işareti oluşmasının önüne geçiyoruz
         3. replace(/[^a-z0-9-.]/gi,"") ile temizlik işlemini gerçekleştiriyor, - ve . gibi karakterlerin
         temizlenme işleminden hariç tutulmasını sağlıyoruz.
         4. toLowerCase() ile değişkeni tamamen küçük harflere çeviriyoruz.
         */

        var clearStr = str.replace(" ","-").replace("--","-").replace(/[^a-z0-9-.çöşüğı]/gi,"").toLowerCase();

        /*
         Son olarak işlemden geçirdiğimiz değeri tekrar inputa basıyoruz
         */

        $("#" + id).val(clearStr);

        /*
        Aşağıdaki olay tamamen işin geyiği, silebilirsiniz
        */

        $("#result").html("Adeta sihir kullanıyormuşcasına...");

    }

Çalışan uygulamayı incelemek ve scriptin tüm dosyalarını bilgisayarınıza indirmek için aşağıdaki bağlantıları kullanabilirsiniz. “Aga bu nedir? Ben denedim olmadı. Peki şu şu olayı nasıl yapıyoruz?” türü takıldığınız tüm noktaları yorum olarak aktarabilirsiniz, yine bilgim dahilinde tüm sorularınızı cevaplamaya çalışacağım.

Ayrıca benzer bir input kontrol işlevi için aşağıdaki konuyu da gözden geçirmek isteyebilirsiniz:
jQuery ile basit form input kontrolü

Önizleme
İndir (72 KB)

Facebook Yorumları

19 Yorum

  1. Melike

    Ajansça takipçiniz Caner.

    İnsan hem bu kadar donanımlı hem bu kadar eğlenceli hemde bu kadar bekar nasıl olabilir merak içindeyiz 😀

  2. Çağrı

    Boşluklar konusunda düzgün olarak çalışmıyor , örneğin KPSS A Muhasebe Hazırlık Kitabı bunu input olarak gönderdiğimde kpss-amuhasebehazirlikkitabi olarak veriyor.

  3. Samet ÇİLLİ

    haddim olmayaraktan yorumlara göre belki başkalarına yardımcı olabilir diye yazıyorum,

    1
    var clearStr = str.replace(" ","-").replace("--","-").replace(/[^a-z0-9-.çöşüğı]/gi,"").toLowerCase();

    burası belki istenirse;

    1
    var clearStr = str.replace(/ /gi,"-").replace(/--/gi,"-").replace(/[^a-z0-9-.çöşüğı]/gi,"").toLowerCase();

    kullanılabilir
    Split kullanılmadan yapılması belki daha sağlıklı bir kullanım olabilirdi,
    clearStr temizleme işleminde türkçe karakterleri eklememek gerekiyor, yukarıda türkçe karakterler temizlenmiş artık geriye türkçe karakter kalmasın verimizde.

    • mahmut han

      var clearStr = str.replace(” “,”-“).replace(“–“,”-“).replace(/[^a-z0-9-.çöşüğı]/gi,””).toLowerCase();
      – işareti olmadan boşluk vererek nasıl yazabiliriz.
      Mahmut-Han
      Mahmut Han olarak yazmak istiyorum

      • Caner
        Yazar

        Şu şekilde yazarsan istediğin gibi çalışacaktır eminim:

        1
        str.replace(/[^a-z0-9-.çöşüğı]/gi,””).toLowerCase();
  4. Ekrem ÖZER

    Merhaba Caner hocam,

    Anlatım çok güzel fakat ben bu fonksiyonu şu şekilde kullanmak istiyorum, iki tane inputum var diyelim input1 ve input2

    input 1 e normal texti girince otomatik olarak eş zamanlı input2 yede replace ederek yazmasını istiyorum

    Aşağıdaki kod ile input1 e girilen değeri eş zamanlı input2 ye yazdırabiliyorum fakat replace edemiyorum

    $(document).ready(function () {
    $(“#input1”).keyup(function () {
    $(‘#input2’).val($(‘#input1’).val());
    });
    });

    Konuyla ilgili yardımlarınızı rica ederim. Şimdiden teşekkürler.
    Makale için emeğinize sağlık

    • Caner
      Yazar

      Merhaba Ekrem,

      Bu aslında tek bir inputu kontrol etmek üzere hazırlanmış bir kod fakat ufak bir modifikasyonla kendine uygun hale getirebilirsin. Eğer ikinci inputun id’si sabit ise ve sadece onun değerini değiştirmek istiyorsan yukarıda 59. satırda bulunan $(“#” + id).val(clearStr); ifadesinin altına $(“#input2”).val(clearStr); ekleyerek halledebilirsin.

      • Ekrem ÖZER

        Merhaba Caner hocam,
        Dediğiniz gibi yaptım fakat olmadı, JQuery bilgim çok az asp.net projem için böyle bir şeye ihtiyaç duydum fakat asp.net ile yapamıyorum bunu

        • Caner
          Yazar

          Kodlarının ilgili bölümünü pastebin.com üzerinden paylaşabilirsen elimden geldiğince yardımcı olmaya çalışayım Ekrem.

  5. Ekrem ÖZER

    Hocam çok sağolun

    aslında sizin template üzerinden gitmemiz benim işimi görür
    inputun altına birde input2 ekledim. input2 ye değer girdiğim zaman replace edip input’a yazması benim için yeterli olacaktır.
    http://pastebin.com/crALJDeE

  6. Ekrem ÖZER

    Hocam eline koluna sağlık 3 gündür bunu araştırıyorum ilaç gibi geldin (:

    Bir bug buldum sanki ama birden fazla boşluk varsa ilk boşluğa – koyuyor ikincisi ve sonraki için boşlukları birleştiriyor.

  7. Ekrem ÖZER

    Günaydın,
    Kodda ufak bir değişiklik yaparak birden fazla boşluğu kaldırma bug’ını düzelttim.
    http://pastebin.com/hpwypYxF js bu haliyle input’a girilen değeri input2 ye replace ederek yazıyor. Bana lazım olan kısmı buydu belki başkalarınada lazım olur. Emeğin için tekrar çok teşekkürler Caner hocam, takipteyim (:

  8. Mehmet Özhan Hastaoğlu

    Teşekkürler ilgili çalışma için. Anlatımızda çok başarılı.

    Arkadaşların dikkat etmesi gereken şey javascript ile yapmaya çalışanlarda iki çeşit küçük i çeşidinin olduğu 🙂

    Gözlükle yakından bakınca farkettim.

    Örnek

    //tips = “Biıİ”
    //tips = tips.replace(“ü”, “u”);
    //tips = tips.replace(“ı”, “i”);
    //tips = tips.replace(“ğ”, “g”);
    //tips = tips.replace(“ş”, “s”);
    //tips = tips.replace(“ö”, “o”);
    //tips = tips.replace(“ç”, “c”);
    //tips = tips.replace(“Ü”, “u”);
    //tips = tips.replace(“İ”, “i”);
    //tips = tips.replace(“Ğ”, “g”);
    //tips = tips.replace(“Ş”, “s”);
    //tips = tips.replace(“Ö”, “o”);
    //tips = tips.replace(“Ç”, “c”);
    //tips = tips.replace(” “, “-“);
    //tips = tips.toLowerCase();
    //alert(tips);

Uyarı: Yorumlarda link kullanmayınız. Link içeren yorumlar otomatik olarak spam kabul edilmektedir.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir