Last updated: 1st July 2025
Need to format a number like 515458499 into a more readable pattern such as 515-458-499 directly in the browser? Whether you're working with a numeric string or plain text, one of the fastest and most efficient ways to achieve this is with JavaScript Regular Expressions (RegEx). In this quick tutorial, I’ll show you a simple and effective method that works seamlessly in both JavaScript and jQuery.Add a Dash or Hyphen every 3rd Character using JavaScript
I'm using an input field to enter numbers or a text string. With every keystroke (onkeyup event), a JavaScript function is triggered that automatically formats the input by inserting a dash (–) or hyphen after every third character using a Regular Expression (RegEx).
<body>
<p>Type some values (numbers or text) in the text box.
The script will automatically add a "hyphen" (-) after every 3rd character.</p>
<div>
<input type="text" id="tbNum" onkeyup="addHyphen(this)"
placeholder="Type some values here" />
</div>
</body>
<script>
function addHyphen (element) {
let ele = document.getElementById(element.id);
const cleaned = ele.value.split('-').join(''); // Remove dash (-) if mistakenly entered.
// Match every 3 characters and join them with hyphens.
const finalVal = cleaned.match(/.{1,3}/g).join('-');
ele.value = finalVal;
}
</script>
</html>Let me explain the regular expressions that I have used inside the match() method.
match(/.{1,3}/g)
• The dot (.) denotes any character. It will look for number, texts, special characters etc.
• {1, 3} - This is important. It denotes, match any character from 1 to 3 digits. Therefore, it adds or joins the dash after every 3rd character. Change the value 3 to 2 to add a dash after every 2nd character or change to 4 to add the dash after every 4th character.
• /g - The g modifier performs a global match in the string.
You can try this: Copy a text string or a number series and paste it in the input box. It still works.
In the JavaScript function above, I’ve leveraged a few important methods, but the most crucial is the join() method. It’s used twice in the function to reassemble arrays into formatted strings. The join() method accepts a parameter, which defines the separator inserted between each array element. In this case, we use a hyphen (-) to insert dashes between every group of characters, effectively formatting the number or text string for better readability.
In the first part of the function, I've combined the split() and join() methods to sanitize the user’s input. This checks whether the user has manually entered a dash (-) while typing. Since we want dashes to appear only after every third character, manually added dashes could disrupt the formatting logic. To prevent this, any existing dashes are stripped out by replacing them with an empty string, ensuring consistent and clean input before formatting is applied.
ele = ele.value.split('-').join('');
In the second part of the function, the join() method is used alongside the match() method to format the input string. The match() method applies a regular expression to divide the input into groups, typically every "three" characters. Once these segments are identified, join('-') reassembles them into a single string, inserting a dash (-) between each group. This dynamic pairing of match() and join() ensures consistent formatting, especially for phone numbers, ID codes, or any structured data string.
let finalVal = ele.match(/.{1,3}/g).join('-');
Add a Dash or Hyphen every 3rd Character using jQuery
You can easily implement the same formatting functionality within your jQuery code. Simply call the addHyphen() function inside the keyup event handler to automatically apply the dash formatting in real time as the user types.
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<p>Type some values (numbers or text) in the text box.
The script will automatically add a "hyphen" (-) after every 3rd character.</p>
<div>
<input type="text" id="txt" placeholder="Type some values here" />
</div>
</body>
<script>
$(document).ready(function () {
$('#txt').keyup(function (event) {
addHyphen (this);
});
});
function addHyphen (element) {
const val = $(element).val().split('-').join(''); // Remove dash (-) if mistakenly entered.
let finalVal = val.match(/.{1,3}/g).join('-'); // Add (-) after 3rd every char.
$(element).val(finalVal); // Update the input box.
}
</script>
</html>