I want to insert a slash after every two characters, but just for the first two instances. The following regex inserts after every occurrence. Does anyone know how to limit it to two occurrences? The amount will be entered by the user through an input element. So if a user entered 30032017 it would be something like the following.

function insertSlash(val) {
    return val.match(new RegExp('.{1,2}', 'g')).join("/");
}

insertSlash(input);

so for the first character the user would enter 3. On the next input it will be 0. this should then insert a slash.

this should then return 30/03/2017.

I want to insert a slash after every two characters, but just for the first two instances. The following regex inserts after every occurrence. Does anyone know how to limit it to two occurrences? The amount will be entered by the user through an input element. So if a user entered 30032017 it would be something like the following.

function insertSlash(val) {
    return val.match(new RegExp('.{1,2}', 'g')).join("/");
}

insertSlash(input);

so for the first character the user would enter 3. On the next input it will be 0. this should then insert a slash.

this should then return 30/03/2017.

• javascript
• regex

Share Improve this question Follow edited Mar 30, 2017 at 15:28 asked Mar 30, 2017 at 15:17 user7597670user7597670 4

• can you use jquery? – indubitablee Commented Mar 30, 2017 at 15:27
• There are a lot of input masks that you can use, you don't need to re-invent it.. – Incepter Commented Mar 30, 2017 at 15:28
• google the maskedInput.js – Incepter Commented Mar 30, 2017 at 15:29
• @indubitablee not really. I am using react and it is related to this question - stackoverflow./questions/43119701/… – user7597670 Commented Mar 30, 2017 at 15:29

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

There are a couple of ways you can do this, you can use a regex formatted just for this type of string

function insertSlash(val) {
  return val.replace(/^(\d{2})(\d{2})/, '$1/$2/');
}

console.log(insertSlash('30032017'));

Or you can use a simple replace function to keep track of replace counts

function insertSlash(val) {
  var count = 2;
  var i = 0;
  return val.replace(/(\d{2})/g, function(match, capture) {
    return (i++ < count) ? capture + '/' : capture;
  });
}

console.log(insertSlash('30032017'));

EDIT

It looks like you've edited your question to include the need for this to happen as the user types. There are mask plugins for this that take into account caret placement, placeholder information, and it would probably be worth your time to check some of them out. Here is one that I found that has a react JS ponent for it. I can't vouch for it, I've never used it, but it is an idea for something to look at.

Ignoring that it might not match,

"30032017".match(new RegExp("(..)(..)(....)")).slice(1).join("/")

The value returned from match is a match group array. The first element will have the entire matched string, so it needs to be sliced out so we can join.

It's easier if you slice the string when you know the specific character positions:

return val.slice(0, 2) + "/" + val.slice(2, 4) + "/" + val.slice(4)

function insertSlash(val) {
    return val.substr(0,2)+"/"+val.substr(2,2)+"/"+val.substr(4,4)
}

insertSlash('30032017');

If you want to treat your date string like an actual Date you could do something like this:

const dateString = "30032017"
const date = new Date(dateString.slice(4), dateString.slice(3,4), dateString.slice(0,2))

const formattedDateString = date.getUTCFullYear() +"/"+ date.getUTCMonth() +"/"+ date.getUTCDate()

console.log(formattedDateString)

This would allow you to do any intermediary date manipulation (adding/subtracting days/months/years) if you so desired.