Add a comma every eight digits

Question

Given the following input:

123456781234567812345678 

I am trying to do the following:

 12345678,12345678,12345678 

Currently, work on doing this is currently reading as:

 parts = parts.replace(/\B(?=(\d{8})+(?!\d))/g, ","); 

The problem I get is that the regular expression is read from right to left. I created JSFIDDLE to show the problem. As a result, I get something like this.

 123,45678910,12345678 

Finally, when I use the arrow keys to move, it brings me back to the end of the input.

REGEX101

Answer 1

Using @Avinash regexp along with my answer from this question , you can achieve what you want with this code:

  $('.singleSpace').keyup(function() { var foo = this.value.replace(/\D/g, '').replace(/(\d{8})(?!$)/g, "$1,") var carretPos = doGetCaretPosition(this) carretPos += foo.length - this.value.length this.value = foo; setSelectionRange(this, carretPos, carretPos) }); //Code taken from // https://stackoverflow.com/questions/17858174/set-cursor-to-specific-position-on-specific-line-in-a-textarea function setSelectionRange(input, selectionStart, selectionEnd) { if (input.setSelectionRange) { input.focus(); input.setSelectionRange(selectionStart, selectionEnd); } else if (input.createTextRange) { var range = input.createTextRange(); range.collapse(true); range.moveEnd('character', selectionEnd); range.moveStart('character', selectionStart); range.select(); } } //Code taken from // https://stackoverflow.com/questions/2897155/get-cursor-position-in-characters-within-a-text-input-field function doGetCaretPosition (oField) { // Initialize var iCaretPos = 0; // IE Support if (document.selection) { // Set focus on the element oField.focus (); // To get cursor position, get empty selection range var oSel = document.selection.createRange (); // Move selection start to 0 position oSel.moveStart ('character', -oField.value.length); // The caret position is selection length iCaretPos = oSel.text.length; } // Firefox support else if (oField.selectionStart || oField.selectionStart == '0') iCaretPos = oField.selectionStart; // Return results return (iCaretPos); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" class="singleSpace" /> 

Basically, use regexp to make changes. Be sure to delete each character without a digit before running the additional regexp commas.

Then you need to use the code snippet to place the carriage where it was when replacing the value.

Answer 2

You can use the underlying regular expression based on the lower expression.

 alert('123456781234567812345678122'.replace(/(\d{8})(?!$)/g, "$1,")) alert('123456781234567812345678'.replace(/(\d{8})(?!$)/g, "$1,")) 

Demo

(\d{8}) captures every 8 digits, but not the last one. (?!$) negative lookahead that states that the match will not be followed by the end of the line binding. Thus, replacing the matched characters with the presence within the first group plus, you will get the desired result.