How do I separate a currency symbol from a money value and preserve decimals and commas?

Question

I'm trying to take the output of toLocaleString and do a little extra formatting on it. I started with this code:

displayAmount = 1234.56789
currencyFormatted = displayAmount.toLocaleString('en-US', {style: 'currency', currency: 'USD'});

The value of currencyFormatted becomes:

$1,234.57

Not bad, but for various reasons, I want to be able to add a space between the $ and the 1, and wrap a span around it. So the desired output is:

<span>$</span> 1,234.57

So I added this code, which I derived from other answers on Stack Overflow:

symbolSeparated = currencyFormatted.split(/(\d+)/).filter(Boolean);
myElement.innerHTML = "<span>" + symbolSeparated[0] + "</span> " + symbolSeparated[1];

But, I got:

<span>$</span> 1

I realized that my split was considering commas and decimals as text, and splitting there. I tried some other regex that I found, like /[^0-9\.]+/g, but it mostly seemed to just fail and symbolSeparated[1] would be undefined.

In any case, it doesn't have to be regex, it can be any combination of functions or whatever. The question is, how can I separate the currency symbol from the numerical value, while preserving decimals and commas?

Please note, the currency symbol is not guaranteed to be one character in length (otherwise I could just use substring()). It can be from 1 to 3 characters, so far as I know.

Also, answers not dependant on jQuery are preferred.

Chris Baldwin · Accepted Answer · 2017-08-04T06:19:40.123

2

This should do the trick for you. The regular expression /^(\D*)(.*)/ looks for all non-digit characters at the front of the string and saves it in the first matching group and then puts the remainder of the string in the second matching group.

const regex = /^(\D*)(.*)/;

function x() {
    displayAmount = 1234.56789
    currencyFormatted = displayAmount.toLocaleString('en-US', {style: 'currency', currency: 'USD'});


    m = regex.exec(currencyFormatted );
    myElement.innerHTML = "<span>" + m[1] + "</span> " + m[2];
}

edited Aug 04 '17 at 06:19

answered Aug 04 '17 at 05:34

Chris Baldwin

539
3
9

Thank you for responding. The result I'm getting, though, is `$1234.57 $`. I'm not sure why the dollar sign is repeated, but in any case, is that regex definitely correct? – Questioner Aug 04 '17 at 06:16
The regex itself is fine. I just used the wrong indexes when accessing the matching groups. I have corrected my answer. The correct line is myElement.innerHTML = "" + m[1] + " " + m[2]; – Chris Baldwin Aug 04 '17 at 06:20
Works great now, thank you! Just so I'm clear, `m[0]` will be a complete duplicate of the originally provided string? – Questioner Aug 04 '17 at 06:34
`m[0]` will be the full match which in this case the full string. If you had a regex that only matched a portion of the original string them `m[0]` would only be the substring that was matched. – Chris Baldwin Aug 04 '17 at 06:40

score 1 · Answer 2 · answered Aug 04 '17 at 06:34

1

One-liner, using String.replace:

myElement.innerHTML = displayAmount.toLocaleString('en-US', {style: 'currency', currency: 'USD'}).replace(/^(\D*)(.*)/, '<span>$1</span> $2')

answered Aug 04 '17 at 06:34

Afanasii Kurakin

3,330
2
24
26

How do I separate a currency symbol from a money value and preserve decimals and commas?

2 Answers2