Regex - creating an input/textarea that correctly

Question

Im designing a conversion website where i perform calculations on inputted numbers and i need my input or textarea to receive and interpret numbers entered in different fashions

like:

Entry = 3,000,000.1111            
Interpreted value = 3000000.1111

or

Entry = 3000000.1111           
Interpreted value = 3000000.1111

and I want to include a second input for European decimal notation (or if possible have the same input do both)

Entry = 3.000.000,1111 (comma acts a decimal, decimal as separator)    
Interpreted value = 3000000.1111

I wonder how I could do this. I suspect from some of my research that I could use regex. Also should i use an input or a textarea? I want to limit the size of the number to 40 places.

It seems the textarea Im currently using won't recognize any values after a comma when a comma is used. I realized this is due to parseFloat. So I need to remove the commas using .replace() before parsing. But what do I do in the instance of European notation where the comma IS the decimal point? I suspect I should use regex to identify if a number is in comma decimal notation or standard decimal point notation and then outline the appropriate replacement behavior based on that. Any ideas how to write regex to identify a number between .0000000001 and 1,000,000,000,000,000 by only the separator and decimal point? What about when the entry doesn't use either? 12000 for example. Any help with this would be appreciated. Using HTML5 and Javascript. I am not using a form and am new at this. This is my first web page so please be patient with my questions.

I was thinking about this:

input = //value from textarea as a string
if(/REGEX which determines that the structure of the number is N,NNN.NN/.test(input)){
input = input.replace(/\,/,""); //replace the commas with nothing
}
else if(/REGEX which determine that structure of the number is N.NNN,NN/.test(input){
    input = input.replace(/\./,""); //replace the decimal point separators with nothing
    input = input.replace(/\,/,".");//replace the comma decimal with a point decimal
}
else{
   //input unchanged assuming is NNNN without decimal
}
number = parseFloat(input);

I want to keep the possibility open for them to enter large numbers and also to use numbers less than one to 10 decimal places. Thanks to those who contributed. Best,RP

Answer 1

I believe this should handle everything:

^[1-9](?:\d{0,2}(?:([,.])\d{3})*|\d+)(?:(?!\1)[,.]\d+)?$

You're treading on complicated territory here. Also, the above RegEx does not allow for values less than "1".

Basically, the RegEx does the following:

1. Allows for no thousandths separators ("," or ".") but ensures if they are used that they occur in the correct places.
2. Allows for either "," or "." to be used as both thousandths/cents separators, but ensures that the cents separator is not the same as the thousandths separator.
3. Requires the string equivalent number to begin with any digit other than "0".

To implement this you could attach an event listener to your form element(s) and use JS to do a simple .test.

---

After reading further, I think I misinterpreted your goal originally. I assumed you simply wanted to validate these values with a RegEx. I also assumed you're trying to work with currency (ie. two decimal places). However, fret not! You can still utilize my original answer if you really want.

You mentioned input and textarea which are both form elements. You can attach a listener to these element(s) looking for the input, change, and/or keyup events. As a part of the callback you can run the .test method or some other functionality. Personally, I would rethink how you want to handle input. Also, what's your actual goal here? Do you really need to know the thousandths separator or keep track of it? Why not just disallow any characters other than the one decimal point/comma and digits?

Also, parsing numbers like .0000000001 as a float is a terrible idea. You will lose precision very quickly if you do any sort of calculations such as multiplication, division, power, etc. You're going to have to figure out a different method to do this like storing the number to the right separately and as integers instead then go from there.

I can help you if you describe what you're trying to do in better detail.