Text Masking (Metin Maskeleme)

Merhaba, bu blogumda Typescript ile bir input valuesini istediğimiz şekilde maskeleyeceğiz. Ayrıca blogun sonunda ekleyeceğim github linklerinden kodların Javascript ve Typescript halini bulabilirsiniz. Böylece kodları isterseniz React, React Native, Typescript ya da Javascript tabanlı projelerinizde kullanabileceksiniz. O zaman işe koyulalım…

İlk olarak yapmak istediğimiz şeyi belirleyelim. Biz bir maske belirleyeceğiz ve buna göre inputumuza girilen değeri maskeleyeceğiz. Aynı zamanda girilen değerlerin türünü de kontrol etmek istiyorum yani girilen karakterlerin yalnızca alfabetik, yalnızca numerik ya da alfanumerik (alfabetik ya da numerik) olmasını belirlemek istiyorum. Bu yüzden maskeleme yaparken üç farklı türde maskeleme yapacağız. Örneğin maskeleme yaparken 0 girdiğim yerlere denk gelen karakterler numerik olsun, * girdiğim yerlere denk gelen karakterler alfabetik olsun ve son olarak ? koyduğum yerlere denk gelen karakterler ise alfanumerik olsun.
Yapmak istediğimiz şeyi ve kurallarımızı belirlediğimize göre şimdi kodlamaya geçebiliriz.

Öncelikle bir interface oluşturacağız. Bu şekilde parametrelerimizin değerlerini belirttiğimiz şekilde olmasını sağlayabileceğiz.

interface TextFormat {
  format: string, //Format parametremizin değerinin string türünde olmasını sağladık
  text: string | number //text parametremizin değerinin string veya integer türünde olmasını sağladık
}

Şimdi de maskeleme işlemini yapacağımız fonksiyonu yazalım.

export default function TextFormatter(props: textFormat) {
   let result = ""; //text parametresindeki değerin maskelenmiş halini tutar.
   let inputIndex = 0; //text parametresinin indexini tutar.
   
   for (let i = 0; i < props.format.length; i++) { //Burada belirttiğimiz maskenin tüm karakterlerini kontrol ediyoruz
      if (props.text[inputIndex]) { //Eğer maskelenecek verinin belirtilen indexinde karakter varsa içteki işlemleri yapar
         if ((props.format[i] != "0" && props.format[i] != "*" && props.format[i] != "?") && props.text[i] != props.format[i]){
         //Burada eğer maskenin [i]. değeri 0, ? veya * karakterlerine eşit değilse direkt result değişkenine atıyoruz.
            result += props.format[i];
         } else { //Eğer maskenin [i]. değeri 0, ? veya * karakterlerine eşitse
             if (props.format[i] == "0") { //Eğer maskenin [i]. değeri 0 karakterine eşitse
                if (isNaN(props.text[inputIndex]) === false) { //Aynı zamanda da bu karakter number türündeyse
                   result += props.text[inputIndex]; //Değeri result değişkenine at.
               }
             }  else if (props.format[i] == "*") { //Eğer maskenin [i]. değeri * karakterine eşitse
                if (isNaN(props.text[inputIndex]) === true) { //Aynı zamanda da bu karakter number türündeyse
                   result += props.text[inputIndex]; //Değeri result değişkenine at.
                }
             } else { //Eğer maskenin [i]. değeri ? karakterine eşitse
                 result += props.text[inputIndex]; //Değeri result değişkenine at.
             }
             inputIndex++; //Index değerini bir arttırıyoruz.
         }
      }
   }
   return result; //Ve son olarak maskelenmiş yeni değerimizi döndürüyoruz
}

Evet genel olarak kodlarımız bu kadar. Tüm satırları elimden geldiğince açıklamaya çalıştım. Takıldığınız ya da önermek istediğiniz bir şey olursa benimle iletişime geçebilirsiniz 🙂
Ayrıca projeyi yakında npm paketi haline getireceğim. Böylece projelerinize daha kolay ekleyebileceksiniz.

Projenin Javascript versiyonu için buraya tıklayabilirsiniz
Projenin Typescript versiyonu için buraya tıklayabilirsiniz