CODEWITHSUNDEEP
jqueryregexnumber-formatting
drdarwin
drdarwin

Reputation: 21

Thousand separator in numeric input with jQuery and regularexpressions

I need to make my numeric input in such mode: {1-3 numbers} {white-space} {3 numbers} {white-space} {3 numbers} {white-space} .. and so on..

For example, when user enters 1000 it should be converted to 1 000, than he enters 1 0000, and it will be converted to 10 000; on deleting last zero input value should return to 1 000

there's a jquery plugin autonumeric, but i need only this thousand separating function

my code looks like:

$('#myinput').live('keypress', function() {
    if ($(this).val().length == 3){
        newval = $(this).val().replace(/([0-9])([0-9]{2}$)/, '$1 $2');
    }
    if ($(this).val().length == 4){
        newval = $(this).val().replace(/([0-9])([0-9]{3}$)/, '$1 $2');
    }
    ...
    $(this).val(newval);
});

it doesn't work properly, as well as this:

newval  = $(this).val().replace(/(\S{1,3})([$0-9]{2})/g, '$1 $2');
newval2 = newval.replace(/([0-9]{1})[\s]([0-9]{1})[\s]/g, '$1$2 ');

this one fails on deleting last number

Upvotes: 2

Views: 17054

Answers (3)

Elham Pilevar
Elham Pilevar

Reputation: 104

add number-separator class to your input text element and add blow code to script

<input type="text" class="number-separator" placeholder="Enter Your Number Here...">





jQuery(document).ready(function () {
jQuery(document).on('input', '.number-separator', function (e) {
if (/^[0-9.,]+$/.test($(this).val())) {
  $(this).val(
    parseFloat($(this).val().replace(/,/g, '')).toLocaleString('en')
  );
} else {
  $(this).val(
    $(this)
      .val()
      .substring(0, $(this).val().length - 1)
  );
}});});

You can see sample on: https://www.jqueryscript.net/demo/number-thousand-separator/

Upvotes: 0

Ewout Kleinsmann
Ewout Kleinsmann

Reputation: 1297

EDIT:

A working example on jsfiddle

Example with monkey patch for cursor replacement: jsfiddle

From the code of SugarJS

/***
 * @method format([comma] = ',', [period] = '.')
 * @returns String
 * @short Formats the number to a readable string.
 * @extra [comma] is the character used for the thousands separator. [period] is the character used for the decimal point.
 * @example
 *
 *   (56782).format()           -> '56,782'
 *   (4388.43).format()         -> '4,388.43'
 *   (4388.43).format(' ')      -> '4 388.43'
 *   (4388.43).format('.', ',') -> '4.388,43'
 *
 ***/
'format': function(comma, period) {
  comma = comma || ',';
  period = period || '.';
  var split = this.toString().split('.');
  var numeric = split[0];
  var decimal = split.length > 1 ? period + split[1] : '';
  var reg = /(\d+)(\d{3})/;
  while (reg.test(numeric)) {
    numeric = numeric.replace(reg, '$1' + comma + '$2');
  }
  return numeric + decimal;
}

Upvotes: 5

Qtax
Qtax

Reputation: 33908

You could use:

var str = "1 2345 67 89  11";
str = str.replace(/\D+/g, '');
str = str.replace(/\d(?=(?:\d{3})+(?!\d))/g, '$& ');

Example at http://jsfiddle.net/4Wsqq/

This simple solution will not work with negative numbers nor decimals.

Note that there are problems with doing such things on a keypress/keydown/keyup event. My major annoyance would be that the cursor position will be moved to the end, which means that users can't really enter/change the value anywhere else but at the end of the string.

Upvotes: 0

Related Questions