Skip to content

Instantly share code, notes, and snippets.

@meftunca
Last active April 18, 2019 19:23
Show Gist options
  • Save meftunca/cee003ae840fa2318eeca1f203b2261d to your computer and use it in GitHub Desktop.
Save meftunca/cee003ae840fa2318eeca1f203b2261d to your computer and use it in GitHub Desktop.
Javascript number mask
const mask = (res = "", regex) => {
if (res.replace(/\D+/gim, "").length == 0) return "";
if (res.replace(/\D+/gim, "").length > regex.replace(/\D+/gim, "").length)
return res.slice(0, regex.replace(/\[|\]/gim, "").length);
let regexNumber = regex.match(/\d+/gim, ""), //sadece sayılar
totalLen = res.match(/\d+/gim, "").join("").length, //gelen değerin uzunluğu
number = res.match(/\d+/gim, "").join("") + new Array(regexNumber.join("").length - totalLen).fill("_").join(""),
len = 0,
rlen = 0;
let match = regex.replace(/\[\d+\]/gim, (m, k) => m.replace(/\[\d+\]/gim, "$" + rlen++));
regexNumber.map((i, k) => {
match = match.replace("$" + k, number.slice(len, len + i.length));
len = len + i.length;
});
return match.replace(/[\D]+$/gim, "");
};
import React, { Component } from "react";
import TextField from "../components/ui/TextField";
import { View } from "react-native";
const phoneRegex = "+([000]) [000] [00] [00]";
const dateRegex = "[00]/[00]/[0000]";
const moneyRegex = "$[000],[00]";
export default class InputMask extends Component {
state = { phone: "", date: "", money: "" };
render() {
return (
<View style={{ padding: 12 }}>
<TextField
value={this.state.phone}
label='Default Flat Input'
autoFocus={true}
onChangeText={res => {
let val = mask(res, phoneRegex);
this.setState({ phone: val });
}}
keyboardType='phone-pad'
/>
<TextField
value={this.state.date}
label='Default Flat Input'
onChangeText={res => {
let val = mask(res, dateRegex);
this.setState({ date: val });
}}
keyboardType='phone-pad'
/>
<TextField
value={this.state.money}
label='Default Flat Input'
onChangeText={res => {
let val = mask(res, moneyRegex);
this.setState({ money: val });
}}
keyboardType='phone-pad'
/>
</View>
);
}
}
@altuncht
Copy link

Merhaba Hocam, Elinize sağlık güzel bir çalışmaya benziyor. bunu nasıl kullanabiliriz? kütüphane haline getirmeniz mümkün mü? TextField componenti nasıl olacak onu da paylaşabilir misiniz?

@meftunca
Copy link
Author

meftunca commented Apr 18, 2019

Yukarıda örnek kullanım var. Paket haline getirmeyi düşünüyorum ama çok basit bir çözüm :) bunu projeye yapıştırmak daha mantıklı olacağı kanısını yenemedim bir türlü .İnputtan onchange ile alınan değeri mask(inputtan_gelen_deger, regExp) şeklinde kullanabilirsiniz.

 const value = "5555555555"; //inputtan gelen değer
 this.setState({ phone: mask(value,"+([000]) [000] [00] [00]") });
//çıktı +(555) 555 55 55 gibi
// Köşeli parantez dışına istediğin karakteri koyabilirsin bu arada

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment