How can I insert a character after every 2 characters?

Question

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.

There are a lot of input masks that you can use, you don't need to re-invent it.. — Incepter, Mar 30 '17 at 15:28
@indubitablee not really. I am using react and it is related to this question - http://stackoverflow.com/questions/43119701/format-dd-mm-yyyy-input-react-as-user-types — , Mar 30 '17 at 15:29

KevBot · Answer 1 · 2017-03-30T16:04:45.350

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 component for it. I can't vouch for it, I've never used it, but it is an idea for something to look at.

score 0 · Answer 2 · answered Mar 30 '17 at 15:21

0

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.

answered Mar 30 '17 at 15:21

David Ehrmann

7,366
2
31
40

score 0 · Answer 3 · answered Mar 30 '17 at 15:23

0

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)

answered Mar 30 '17 at 15:23

Matt S

14,976
6
57
76

there is one thing that I havent put in the question because it is related to a bigger issue. The date is actually dynamic through a user entering input through an input element. http://stackoverflow.com/questions/43119701/format-dd-mm-yyyy-input-react-as-user-types – Mar 30 '17 at 15:24
Then how do you know where to insert the characters? Your question states "every 2 characters". – Matt S Mar 30 '17 at 15:27
every 2 characters, for the first 2 instances. Do you know what I mean or should it be clearer? – Mar 30 '17 at 15:28
That's a different question entirely. I would implement an input mask for find a library: http://stackoverflow.com/questions/12578507/how-to-implement-an-input-with-a-mask – Matt S Mar 30 '17 at 15:33

score 0 · Answer 4 · answered Mar 30 '17 at 15:46

0

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

insertSlash('30032017');

answered Mar 30 '17 at 15:46

Christian Carrillo

414
3
8

score 0 · Answer 5 · answered Mar 30 '17 at 15:47

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.

How can I insert a character after every 2 characters?

5 Answers5

EDIT