1

I have an user input where user can edit price of something. To leave data consistance I would like to manipulate with that string on front-end site.

What I want to do is:

1234 to 1234.00
12.3 to 12.30
12,3 to 12.30
1234.45 to 1234.45

So basicly,

  1. Replace comma with dots this should be done easy with somehing like:

    str.replace(',', '.');
    
  2. Add dots if number if not decimal and also always change number of digits on two(so add 0 if needed) I try to do something like:

    priceByUser = priceByUser.replace(/^\d*\.?\d*$/, "$1\.00");
    

unfortunately this really doesnt even work as I expected.

Is there a chance someone can help me to solve this issue? Thanks

Andurit
  • 5,612
  • 14
  • 69
  • 121
  • 1
    Are you sure about `123.45 to 1234.45`? – Wiktor Stribiżew May 10 '16 at 14:50
  • Hi @WiktorStribiżew, thank you for this point. You are right I dont want to, sorry for that it was typo. Changed already in question. – Andurit May 10 '16 at 14:51
  • This may be a lazy solution but you could just add .00 to every number you find with `[0-9]+`. *After* that you can look for numbers with two occurrences of decimal separators - `[0-9]+(\.|,)[0-9]+\.00` - and remove the last three characters. – Geeky Guy May 10 '16 at 14:51
  • What should happen if user's input is invalid? Such as "abc". Rion Williams's answer will give you NaN... But that would not make users happy I think – Jan Legner May 10 '16 at 14:54
  • Ehmm good point, I dont try to edit input in real time, just manipulate with value before it is send on server. So NaN because I can disable this send on server if value is not number. However if there are some good solution for this I will be happy to hear abou it – Andurit May 10 '16 at 14:58
  • @JanLegner: isn't that *exactly* what it should say?? – Scott Weaver May 10 '16 at 14:58
  • @sweaver2112: It might be. But if you have to manipulate number on front-end side as OP stated, it is very likely you have to do so in order to show the result to the user. Otherwise it is most likely unnecessary. And if user fills some form and the application show NaN, it is not OK. – Jan Legner May 10 '16 at 15:04
  • *"I dont try to edit input in real time, just manipulate with value before it is send on server"* - Are you saying the user won't even see the updated value, you're only doing it to send extra zeros to the server? If so, why? Trailing zeros after the decimal point won't be stored in a numeric database field. – nnnnnn May 10 '16 at 15:26

1 Answers1

5

You could consider using a regular expression to replace your commas and periods with just decimal points and then parse the values as floats via parseFloat() then finally, use the toFixed(2) function to indicate that you want two decimal places :

// This will clean up your input (consolidating periods and commas), parse the result
// as a floating point number and then format that number to two decimal places
priceByUser = parseFloat(priceByUser.replace(/,/g,'.')).toFixed(2);

If you wanted an extra-level of validation, you could consider stripping out any non-digit or decimal places after this occurs :

// Sanitize
priceByUser = priceByUser.replace(/,/g,'.').replace(/[^\d\.]/g,'');
// Parse and format
priceByUser = Number(priceByUser).toFixed(2);

Example

You can see a working example here and and example of input/output below :

enter image description here

Rion Williams
  • 74,820
  • 37
  • 200
  • 327
  • `originalValue.replace(/,/g,'.')` is sufficient. – Scott Weaver May 10 '16 at 14:56
  • I like that you sanitize string but it is not enough. Still will not have good results with "...", "3.3." etc. – Jan Legner May 10 '16 at 15:00
  • input validation is out of scope here – Scott Weaver May 10 '16 at 15:09
  • It wasn't really the intention to be incredibly throughout with regards to validation, just providing an example of a very simple, albeit weak approach. A simple if-statement could quickly validate if the number was a floating point or not and alert the user that something was wrong (i.e. no letters allowed, etc.). [This thread](http://stackoverflow.com/q/3885817/557445) would probably be better suited for float-based validation. – Rion Williams May 10 '16 at 15:13
  • I think the answer is good enough. @sweaver2112: It is not out of scope. Every programmer must consider all the possibilities. OP asked how to convert some strings to other ones. But this will convert even another strings into NaN (he did not ask for that) and it is very important to at least mention - so he will not be surprised later. – Jan Legner May 10 '16 at 15:23