JavaScript格式化帐号

Question

I have to format an account number input field like below:

Desired format: 123456 1234 12 1

But, the regex which I wrote formats the text field as below:

Current format: 1234 1234 1234 1

Can someone please help me with the correct regex or logic to implement this?

 function cc_format(value) { var v = value.replace(/\\s+/g, '').replace(/[^0-9]/gi, '') var matches = v.match(/\\d{4,13}/g); var match = matches && matches[0] || '' var parts = [] for (i = 0, len = match.length; i < len; i += 4) { parts.push(match.substring(i, i + 4)) } if (parts.length) { return parts.join(' ') } else { return value } } onload = function() { document.getElementById('account-number').oninput = function() { this.value = cc_format(this.value) } } 

 <form> <div>AccountNumber</div><br/> <input id="account-number" value="" placeholder="123456 1234 12 1"> </form> 

Answer 1

You can get groups of 6, instead of groups of 4, then, as soon as your second group gets over 4 characters long, you can insert a space at the desired position. Here's a proof of concept:

 function cc_format(value) { var v = value.replace(/\\s+/g, '').replace(/[^0-9]/gi, '') var matches = v.match(/\\d{6,13}/g); var match = matches && matches[0] || '' var parts = [] for (i = 0, len = match.length; i < len; i += 6) { parts.push(match.substring(i, i + 6)) } if (parts.length > 1 && parts[1].length > 4) { parts[1] = [parts[1].slice(0, 4), ' ', parts[1].slice(4)].join(''); } if (parts.length) { return parts.join(' ') } else { return v } } onload = function() { document.getElementById('account-number').oninput = function() { this.value = cc_format(this.value) } } 

 <form> <div>AccountNumber</div><br/> <input id="account-number" value="" placeholder="123456 1234 12 1"> </form> 

A slightly more elegant solution would be to use .slice() and .join() for the whole thing, which cleans up the code nicely. Here's an example:

 function cc_format(value) { var v = value.replace(/\\s+/g, '').replace(/[^0-9]/gi, ''); if (v.length > 6) v = [v.slice(0, 6), ' ', v.slice(6)].join(''); if (v.length > 11) v = [v.slice(0, 11), ' ', v.slice(11)].join(''); if (v.length > 14) v = [v.slice(0, 14), ' ', v.slice(14)].join(''); if (v.length > 16) v = v.slice(0, 16); return v; } onload = function() { document.getElementById('account-number').oninput = function() { this.value = cc_format(this.value) } } 

 <form> <div>AccountNumber</div><br/> <input id="account-number" value="" placeholder="123456 1234 12 1"> </form> 

Answer 2

You can use following code, to format the code properly when user is typing. It works dynamically.

 const normalize = elem => { let value = elem.target.value; const onlyNums = value.replace(/[^\\d]/g, ''); if (onlyNums.length <= 6) { return onlyNums; } else if (onlyNums.length <= 10) { return `${onlyNums.slice(0, 6)} ${onlyNums.slice(6)}`; } else if (onlyNums.length <= 12) { return `${onlyNums.slice(0, 6)} ${onlyNums.slice(6, 10)} ${onlyNums.slice(10, 12)}`; } return `${onlyNums.slice(0, 6)} ${onlyNums.slice(6, 10)} ${onlyNums.slice(10, 12)} ${onlyNums.slice(12, 13)}`; }; const input = document.getElementById('input'); input.addEventListener('input', (e) => e.target.value = normalize(e)); 

 <input type='text' id='input' value=''> 

Answer 3

How about using Substring?

var first = this.value.substring(0, 6)
var second = this.value.substring(6, 10)
var third = this.value.substring(10, 12)
var fourth = this.value.substring(12, 13)

JsFiddle example: https://jsfiddle.net/c9p70fw1/