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

Well that’s it. Thanks for reading.

Previous - Dynamically insert or add a Smiley using JavaScriptNext - Automatically add a Dash or Hyphen after every 3rd character using JavaScript or jQuery



Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner
Tweet this article Google+

Related Posts:

Join our Google Plus Community and be a part of a discussion!