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 (''); 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 (''); let finalVal = val. match (/.{1,3}/g). join ('-'); $(element). val (finalVal); } </script> </html> Try it

Well that’s it. Thanks for reading. ☺

← PreviousNext →