Convert String with Dot or Comma as decimal separator to number in JavaScript

Question

An input element contains numbers a where comma or dot is used as decimal separator and space may be used to group thousands like this       1 2     110 000 23     100 1 23    How would one convert them to a float number in the browser using JavaScript   jQuery and jQuery UI are used  Number string  returns NaN and parseFloat   stops on first space or comma

User · Answer

This answer accepts some edge cases that others don't:

Only thousand separator: 1.000.000 => 1000000
Exponentials: 1.000e3 => 1000e3 (1 million)

Run the code snippet to see all the test suite.

const REGEX_UNWANTED_CHARACTERS = /[^\d\-.,]/g
const REGEX_DASHES_EXEPT_BEGINNING = /(?!^)-/g
const REGEX_PERIODS_EXEPT_LAST = /\.(?=.*\.)/g

export function formatNumber(number) {
  // Handle exponentials
  if ((number.match(/e/g) ?? []).length === 1) {
    const numberParts = number.split('e')
    return `${formatNumber(numberParts[0])}e${formatNumber(numberParts[1])}`
  }

  const sanitizedNumber = number
    .replace(REGEX_UNWANTED_CHARACTERS, '')
    .replace(REGEX_DASHES_EXEPT_BEGINING, '')

  // Handle only thousands separator
  if (
    ((sanitizedNumber.match(/,/g) ?? []).length >= 2 && !sanitizedNumber.includes('.')) ||
    ((sanitizedNumber.match(/\./g) ?? []).length >= 2 && !sanitizedNumber.includes(','))
  ) {
    return sanitizedNumber.replace(/[.,]/g, '')
  }

  return sanitizedNumber.replace(/,/g, '.').replace(REGEX_PERIODS_EXEPT_LAST, '')
}

function formatNumberToNumber(number) {
  return Number(formatNumber(number))
}

_x000D_

const REGEX_UNWANTED_CHARACTERS = /[^\d\-.,]/g
const REGEX_DASHES_EXEPT_BEGINING = /(?!^)-/g
const REGEX_PERIODS_EXEPT_LAST = /\.(?=.*\.)/g

function formatNumber(number) {
  if ((number.match(/e/g) ?? []).length === 1) {
    const numberParts = number.split('e')
    return `${formatNumber(numberParts[0])}e${formatNumber(numberParts[1])}`
  }

  const sanitizedNumber = number
    .replace(REGEX_UNWANTED_CHARACTERS, '')
    .replace(REGEX_DASHES_EXEPT_BEGINING, '')

  if (
    ((sanitizedNumber.match(/,/g) ?? []).length >= 2 && !sanitizedNumber.includes('.')) ||
    ((sanitizedNumber.match(/\./g) ?? []).length >= 2 && !sanitizedNumber.includes(','))
  ) {
    return sanitizedNumber.replace(/[.,]/g, '')
  }

  return sanitizedNumber.replace(/,/g, '.').replace(REGEX_PERIODS_EXEPT_LAST, '')
}

const testCases = [
  '1',
  '1.',
  '1,',
  '1.5',
  '1,5',
  '1,000.5',
  '1.000,5',
  '1,000,000.5',
  '1.000.000,5',
  '1,000,000',
  '1.000.000',

  '-1',
  '-1.',
  '-1,',
  '-1.5',
  '-1,5',
  '-1,000.5',
  '-1.000,5',
  '-1,000,000.5',
  '-1.000.000,5',
  '-1,000,000',
  '-1.000.000',

  '1e3',
  '1e-3',
  '1e',
  '-1e',
  '1.000e3',
  '1,000e-3',
  '1.000,5e3',
  '1,000.5e-3',
  '1.000,5e1.000,5',
  '1,000.5e-1,000.5',

  '',
  'a',
  'a1',
  'a-1',
  '1a',
  '-1a',
  '1a1',
  '1a-1',
  '1-',
  '-',
  '1-1'
]

document.getElementById('tbody').innerHTML = testCases.reduce((total, input) => {
  return `${total}<tr><td>${input}</td><td>${formatNumber(input)}</td></tr>`
}, '')

_x000D_

<table>
  <thead><tr><th>Input</th><th>Output</th></tr></thead>
  <tbody id="tbody"></tbody>
</table>

_x000D_

User · Answer

What about   parseFloat str replace          replace          replace

User · Answer

You could replace all spaces by an empty string  all comas by dots and then parse it   var str    110 000 23   var num   parseFloat str replace   s g      replace             console log num     I used a regex in the first one to be able to match all spaces  not just the first one

User · Answer

I realise I m late to the party  but I wanted a solution for this that properly handled digit grouping as well as different decimal separators for currencies  As none of these fully covered my use case I wrote my own solution which may be useful to others   function parsePotentiallyGroupedFloat stringValue        stringValue   stringValue trim        var result   stringValue replace    0-9  g           if         d 2    test stringValue             result   result replace    d 2         1              return parseFloat result       This should strip out any non-digits and then check whether there was a decimal point  or comma  followed by two digits and insert the decimal point if needed   It s worth noting that I aimed this specifically for currency and as such it assumes either no decimal places or exactly two  It s pretty hard to be sure about whether the first potential decimal point encountered is a decimal point or a digit grouping character  e g   1 542 could be 1542  unless you know the specifics of the current locale  but it should be easy enough to tailor this to your specific use case by changing  d 2   to something that will appropriately match what you expect to be after the decimal point

User · Answer

Here is my solution that doesn t have any dependencies  return value    replace     d -    g   quot  quot        Basic sanitization  Allows  -  for negative numbers    replace    g   quot   quot               Change all commas to periods    replace             g   quot  quot       Remove all periods except the last one   I left out the conversion to a number - that s probably just a parseFloat call if you don t care about JavaScript s precision problems with floats   The code assumes that   Only commas and periods are used as decimal separators   I m not sure if locales exist that use other ones   The decimal part of the string does not use any separators

User · Answer

The perfect solution  accounting js is a tiny JavaScript library for number  money and currency formatting   Check this for ref

User · Answer

This is the best solution  http   numeraljs com   numeral   unformat  0 02      0 02

User · Answer

All the other solutions require you to know the format in advance  I needed to detect    the format in every case and this is what I end up with    function detectFloat source        let float   accounting unformat source       let posComma   source indexOf           if  posComma  gt  -1            let posDot   source indexOf               if  posDot  gt  -1  amp  amp  posComma  gt  posDot                let germanFloat   accounting unformat source                    if  Math abs germanFloat   gt  Math abs float                     float   germanFloat                          else                  source   source replace    g                    float   accounting unformat source                            return float      This was tested with the following cases           const cases                  0   0               10 12   10 12               222 20   222 20               -222 20   -222 20                222 20   222 20               -222 20   -222 20               -2 222 20   -2222 20               -11 111 20   -11111 20               Suggestions welcome

User · Answer

Do a replace first    parseFloat str replace          replace

User · Answer

Here s a self-sufficient JS function that solves this  and other  problems for most European US locales  primarily between US German Swedish number chunking and formatting     as in the OP   I think it s an improvement on  and inspired by  Slawa s solution  and has no dependencies   function realParseFloat s        s   s replace     d  -  g          strip everything except numbers  dots  commas and negative sign     if  navigator language substring 0  2       de   amp  amp    -     d   d 1 3      d 3          d      test s      if not in German locale and matches                            s   s replace    g          strip out commas         return parseFloat s      convert to number           else if    -     d   d 1 3       d 3         d      test s      either in German locale or not match              and now matches                              s   s replace     g          strip out dots         s   s replace    g           replace comma with dot         return parseFloat s             else    try              anyway               s   s replace    g          strip out commas         return parseFloat s      convert to number

User · Answer

try this     var withComma    23 3   var withFloat    23 3    var compareValue   function str     var fixed   parseFloat str replace             if fixed  gt  0         console log true       else        console log false         compareValue withComma   compareValue withFloat

User · Answer

From number to currency string is easy through Number prototype toLocaleString  However the reverse seems to be a common problem  The thousands separator and decimal point may not be obtained in the JS standard  In this particular question the thousands separator is a white space  quot   quot  but in many cases it can be a period  quot   quot  and decimal point can be a comma  quot   quot   Such as in 1 000 000 00 or 1 000 000 00  Then this is how i convert it into a proper floating point number   x000D   x000D  var price    1 000 000 99       value    price replace       s       g  m p1 p2    gt  p1              console log value   x000D   x000D   x000D   So the replacer callback takes  quot 1 000 000 00 quot  and converts it into  quot 1000000 00 quot   After that   in the front of the resulting string coerces it into a number  This function is actually quite handy  For instance if you replace the p1    quot  quot  part with p1    quot   quot  in the callback function  an input of 1 000 000 00 would result 1 000 000 00

[javascript] Convert String with Dot or Comma as decimal separator to number in JavaScript

Examples related to javascript

Examples related to jquery

Examples related to string-parsing

Examples related to data-conversion