Add comma to every eight digits

Question

Given the following input:

123456781234567812345678

I am trying to accomplish the following:

12345678,12345678,12345678

Right now the work to accomplish this currently reads as:

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

The issue I am getting is that the regex reads from right to left. I have created a JSFIDDLE to show the issue. The result I get is something like.

123,45678910,12345678

Lastly when I use the arrow keys to move around, it throws me back to the end of the input.

REGEX101

Answer 1

You could use the below negative lookahead based regex.

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

DEMO

(\d{8}) captures every 8 digit characters but not the one which was at the last. (?!$) negative lookahead which asserts that the match won't be followed by an end of the line anchor. So by replacing the matched chars with the present inside the first group plus , will give you the desired output.

Answer 2

Using @Avinash regexp along with my answer from this question, you can achieve what you want with that 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 the regexp to make your change. Be sure to remove every non digit character before running the regexp adding commas.

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