Mask US phone number string with JavaScript

by

This answer assumes you want the following format: (000) 000-0000 (as the OP states).

There are multiple different ways to implement this, but here are a couple different approaches:

If you want to simply mask the number on the blur event (when the field loses focus), then you could use the following:

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"/>

Alternatively, if you would rather mask the number while typing, you can listen to the input event and then conditionally mask the number based on the regex match: 

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"/>

More Related Contents:

  1. Backslashes – Regular Expression – Javascript
  2. How to remove all line breaks from a string
  3. Regex pattern to match at least 1 number and 1 character in a string
  4. RegEx for Javascript to allow only alphanumeric
  5. Alternation operator inside square brackets does not work
  6. Regex using javascript to return just numbers
  7. regex.test V.S. string.match to know if a string matches a regular expression
  8. Convert camelCaseText to Title Case Text
  9. Regular expression not working for at least one European character
  10. Regular expression to match A, AB, ABC, but not AC. (“starts with”)
  11. How to parse a URL?
  12. List of all characters that should be escaped before put in to RegEx?
  13. Match any non-word character (excluding diacritics)
  14. How can I select an element by ID with jQuery using regex?
  15. Why does String.match( / \d*/ ) return an empty string?
  16. Regex to Match Symbols: !$%^&*()_+|~-=`{}[]:”;’?,./
  17. Javascript regex returning true.. then false.. then true.. etc [duplicate]
  18. Regex to replace everything except numbers and a decimal point
  19. RegEx: How can I match all numbers greater than 49?
  20. Can I use a regular expression in querySelectorAll?
  21. In a regular expression, match one thing or another, or both
  22. Regex remove repeated characters from a string by javascript
  23. (*SKIP)(*FAIL) workaround in JavaScript RegExp
  24. What are non-word boundary in regex (\B), compared to word-boundary?
  25. What is the need for caret (^) and dollar symbol ($) in regular expression?
  26. Replacing accented characters with plain ascii ones [duplicate]
  27. Use of capture groups in String.split() [duplicate]
  28. Regex in JavaScript for validating decimal numbers
  29. Regex to grab strings between square brackets
  30. parsings strings: extracting words and phrases [JavaScript]

Leave a Comment