How to Add space between every 4 characters in JavaScript?

Question

I want to add a space between every 4 characters. I'm developing a webpage about credit card numbers.

example

var x = document.getElementById("card_number").value;

example : if the value of x is 1234567890123456

I need to split this number every 4 characters and add a space. Like this

1234 5678 9012 3456

and I need this number on a variable. Because I need to set this number on the textbox. Please help me. thanks

Simular question like: https://stackoverflow.com/questions/1772941/how-can-i-insert-a-character-after-every-n-characters-in-javascript use the search function — episch, Nov 22 '18 at 08:56
[Alternative search](https://www.google.nl/search?q=style+OR+format+credit+card+number+JavaScript+site%3Astackoverflow.com) — mplungjan, Nov 22 '18 at 08:58

score 38 · Accepted Answer · edited Dec 16 '22 at 05:49

38

You can use RegEx for this

const dummyTxt = '1234567890123456';

const joy = dummyTxt.match(/.{1,4}/g);
console.log(joy.join(' '));

edited Dec 16 '22 at 05:49

8ctopus

answered Nov 22 '18 at 08:56

lifeisbeautiful

1

It do not add a space, it split it up – Orelsanpls Nov 22 '18 at 08:57
3

Yes, @GrégoryNEUT I have edited my answer now. – lifeisbeautiful Nov 22 '18 at 09:02

score 14 · Answer 2 · answered Nov 22 '18 at 08:56

14

You could look for four characters with a positive lookahead for more characters and insert a space after each block.

function format(s) {
    return s.toString().replace(/\d{4}(?=.)/g, '$& ');
}

console.log(format(1234567890123456));

answered Nov 22 '18 at 08:56

Nina Scholz

3

Btw, isn't `replace(/\w...` better because IBANs sometimes start with `FR` or alike. – kissu May 07 '21 at 05:14

score 4 · Answer 3 · answered Nov 22 '18 at 08:57

4

Without regex, you can use map as well to achieve this

let x = '1234567890123456'

let res = [...x].map((d, i) => (i) % 4 == 0 ? ' ' + d : d).join('').trim()

console.log(res)

answered Nov 22 '18 at 08:57

Nitish Narang

It shows values with space like above. but not working in the insert input value. – Hassan Ali Dec 17 '19 at 12:14

3 Answers3