Given the following input:

123456781234567812345678

I am trying to acplish the following:

12345678,12345678,12345678

Right now the work to acplish 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

Given the following input:

123456781234567812345678

I am trying to acplish the following:

12345678,12345678,12345678

Right now the work to acplish 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

• javascript
• jquery
• regex

• 1 What's your input and expected output? – Avinash Raj Commented Apr 16, 2015 at 14:03
• 1 It's a bit unclear what you actually want to happen. Do you want it to look like 12345678,91012345,678 instead? – JJJ Commented Apr 16, 2015 at 14:04
• I added the input, sorry for being unclear. – Dot Batch Commented Apr 16, 2015 at 15:28

2 Answers 2

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.

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./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./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./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 mas.

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