Localized currency input that allows for different currencies and regions - html

Question

In my web app I need to allow the user to enter in money into an input field. The currency and how the amount is formatted can be different in different fields. So while the user can enter this in one field:
$1,234.56
for US dollars for the United States region, they can enter this in another:
€ 1.234,56
for euros using Germany as the region.
Regardless what the currency is and what region the amount is formatted in, the value internally should be returned in the same manner, which in this case would be:
1234.56
I could just use an input field with a type set to "text" but then I would have to write code to check for the currency symbol and how the value is formatted. But it's possible that the user doesn't enter a currency symbol. Also, I don't see a clear way of distinguishing regional numbers without the currency symbol.
Is there any solution that lets the user select the currency symbol and manages the value entered to provide a consistent internal value?

Answer 1

If there is a way to achieve this using just a specifically typed HTML input I don't know about it, the closest one would be type=number, though that doesn't allow for formatted numbers.
For a text type and having code check the input, if you can assume the numbers to always be formatted as latin numbers, you can use a rather naive approach using regular expressions.
function normalize(currency) {
const naive = /(?:(-)\s*)?(?:[^0-9]+\s*)?([0-9]{1,3}(?:[ ,\.]?[0-9]{3})*)(?:[,\.]([0-9]+))?(?:\s*[^0-9-]+)?(?:\s*(-))?/;
const [,mina,base,fraction,minb] = currency.match(naive)||[];
const min = mina || minb ? '-' : '';
return base ? Number(`${min}${base.replace(/[^\d]+/g, '')}.${fraction||0}`) : '';
}
const output = document.querySelector('output');
document.querySelector('input[name=currency]')
.addEventListener('input', (event) => {
const { value } = event.target;
output.value = normalize(value);
});
<label>
amount <input type=text name=currency>
</label>
<div>
The normalized value: <output></output>
</div>
The expression is build around the following concepts:
(?:(-)\s*)?(?:[^0-9]+\s*)?: a minus symbol may be before the number, optionally followed by a currency symbol
([0-9]{1,3}(?:[ ,\.]?[0-9]{3})*): a base number which may contain grouping symbols and groups of three numbers
(?:[,\.]([0-9]+))?: an optional fraction number, indicated by either a comma or period
(?:\s*[^0-9-]+)?(?:\s*(-))?: a minus symbol may be after the number, optionally preceded by a currency symbol
This works for a lot of use cases, though I consider it naive mostly because it does not verify the "thousands separator" not being used also as fraction separator.
a more thorough example