Skip to content

Instantly share code, notes, and snippets.

@Dpbm

Dpbm/index.html

Last active November 12, 2022 01:25
Show Gist options
  • Save Dpbm/9d6517b83485ba02b379939bd88232cd to your computer and use it in GitHub Desktop.
Save Dpbm/9d6517b83485ba02b379939bd88232cd to your computer and use it in GitHub Desktop.
Download ZIP
A BR phone input formatter
Raw
readme.md

Phone number formatter

this can be used to projects that you need to format user's phone based these formats:

  • (DDD) 12345-1234
  • (DDD) 1234-1234
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>phone input formatter</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<input id="phone-input" maxLength="15" />
<script src="index.js"></script>
</body>
</html>
Raw
index.js
function formatNumber(phone){
phone = phone.slice(0, 15);
//111111111 (9) --> 11111 1111
//11111111 (8) --> 1111 1111
const phoneBody = phone.includes('(')
? phone.substring(5).replace('-', '')
: phone.substring(2);
const firstPartSize = phoneBody.length % 2 === 0 ? 4 : 5;
const splitPartsRegex = new RegExp(`(\\d{${firstPartSize}})`);
return phone
.replace(/\D/g, '') //remove letters
.replace(/(\d{2})/, '($1) ') // put DDD around parenteses
.replace(splitPartsRegex, '$1-'); // add a "-" after 5 or 4 digits (depending on the phone size)
}
const input = document.querySelector('input');
input.onchange = (event) => {
const phone = event.target.value;
if(!phone) return;
const formattedPhone = formatNumber(phone);
input.value = formattedPhone;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment