Automatically add a Dash or Hyphen after every 3rd character using JavaScript or jQuery

Let’s assume, I have a number series or a text string and I want to add a dash or hyphen after every 3rd character or simply convert a number like 515458499 to 515-458-499 on my browser. How do I do this? One of the quickest ways to achieve this is by using JavaScript Regular Expressions. I am sharing a simple method that you can use in either JavaScript or jQuery.

Add a Dash or Hyphen every 3rd Character using JavaScript

I am using an input box where I’ll enter the numbers or a text string. The onkeyup event of the input box will call a function, which will automatically add or insert a dash (-) or a hyphen to the string, using Regex.

The Markup and the Script

<html>
<head>
    <title>Add Hyphen to a text using JavaScript</title>
</head>

<body>
    <p>Type some values (numbers or text) in the text box. 
        The script will automatically add a "hyphen" (-) after every 3rd character.</p>
    <p>The onkeyup event calls a JavaScript fuction after you release the key in text box.</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);
        ele = ele.value.split('-').join('');    // Remove dash (-) if mistakenly entered.

        let finalVal = ele.match(/.{1,3}/g).join('-');
        document.getElementById(element.id).value = finalVal;
    }
</script>
</html>

Try it

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.

Try this: Copy a text string or a number series and paste it in the input box. It still works.

The above JavaScript function has other methods. Most importantly, the join() method. I have used this method twice in my function. The method takes a parameter and it can be any value, which it will add to the string.

In the first occurrence, I have used the join() with the split() method. Here, I am checking if the user has entered a dash (-) when typing the values. I cannot allow this, since it will add the dash anywhere between the strings. I want the dash after every 3rd character. Therefore, the (-) will be replaced by an empty.

ele = ele.value.split('-').join('');

In the second occurrence, I am using join() with the match() method. The match() has the Regex values and when it finds a match, it will add (join) the dash (-) to the string or number.

let finalVal = ele.match(/.{1,3}/g).join('-');

Add a Dash or Hyphen every 3rd Character using jQuery

You can use the same method inside your jQuery script. Simply call the addHyphen() function from inside the keyup event.

<html>
<head>
    <title>Add Hyphen after every 3rd character using jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
    <p>Type some values (numbers or text) in the text box. 
        The script will automatically add a "hyphen" (-) after every 3rd character.</p>
    <p>The onkeyup event calls a JavaScript fuction after you release the key in text box.</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) {
        let 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>

Try it

← PreviousNext →