2013-07-15 10 views
12

Potrzebuję regularnego ekspresowego formatu numeru telefonu w USA. Chcę zamienić ciąg numeryczny telefonu na poniższy format ciągu numerów telefonów w języku JavaScript.Maska US numer telefonu string z JavaScript

var number = "4031234789"; 

I chcę, aby zamaskować go poniżej w formacie: -

number = number.mask('(000) 000-0000'); 

Czy ktoś może mi pokazać, że dla wyrażenia regularnego w JavaScript?

+0

możliwy duplikat [Jak zamaskować dane wejściowe HTML za pomocą javacript?] (Http://stackoverflow.com/questions/7665792/how-can-i-mask-an-html-input-using-javacript) – mplungjan

+0

Są te wszystkie odpowiedzi, które ludzie dali ci na [twoje inne pytanie] (http://stackoverflow.com/questions/17650197/mask-javascript-variable-value). – elclanrs

Odpowiedz

2

można użyć wyrażenia regularnego, a następnie złączyć do f orm twój ciąg.

var USNumber = "4031234789".match(/(\d{3})(\d{3})(\d{4})/);<br/> 
USNumber = "(" + USNumber[1] + ") " + USNumber[2] + "-" + USNumber[3]; 
39

Ta odpowiedź zakłada, że ​​wymagany jest następujący format: (000) 000-0000 (jako stan OP).

Istnieje wiele różnych sposobów, aby zaimplementować to, ale oto kilka różnych podejść:


Jeśli chcesz po prostu zamaskować numer na razie blur (gdy pole traci focus) następnie można użyć następujących:

document.getElementById('phone').addEventListener('blur', function (e) { 
 
    var x = e.target.value.replace(/\D/g, '').match(/(\d{3})(\d{3})(\d{4})/); 
 
    e.target.value = '(' + x[1] + ') ' + x[2] + '-' + x[3]; 
 
});
<p>Masked on the blur event (remove focus).</p> 
 
<input type="text" id="phone" placeholder="(555) 555-5555"/>


Ewentualnie, jeśli wolisz zamaskować numer podczas typowania, można słuchać przypadku input a następnie warunkowo zamaskować numer w oparciu o meczu regex:

document.getElementById('phone').addEventListener('input', function (e) { 
 
    var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/); 
 
    e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : ''); 
 
});
<input type="text" id="phone" placeholder="(555) 555-5555"/>

+1

To działa świetnie! Byłem w stanie z łatwością dostosować go do zamaskowania obcego kodu pocztowego. –

+1

Szukałem właśnie tego rodzaju prostej funkcji. Większość była nadęta i nie działała dobrze. Zabiegać! – mix3d

+0

Nie działa w trybie zgodności na IE11 :(ale działa pięknie, gdy tryb zgodności jest wyłączony – LeSteelBox

Powiązane problemy