如何将货币符号与货币价值分开并保留小数和逗号?

Question

我正在尝试获取toLocaleString的输出并对其进行一些额外的格式化。 我从这段代码开始：

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

货币格式化的值变为：

$1,234.57

不错，但是由于各种原因，我希望能够在$和1之间添加一个空格，并在其周围环绕一个跨度。所以所需的输出是：

<span>$</span> 1,234.57

所以我添加了这段代码，这是我从堆栈溢出的其他答案中得出的：

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

但是，我得到了：

<span>$</span> 1

我意识到我的拆分是将逗号和小数视为文本，并在那里拆分。我尝试了我发现的其他一些正则表达式，例如/[^0-9.]+/g，但它似乎大多失败了，symbolSeparated[1]是未定义的。

无论如何，它不必是正则表达式，它可以是函数的任意组合或其他任何东西。问题是，如何在保留小数和逗号的同时将货币符号与数值分开？

请注意，货币符号的长度不保证为一个字符(否则我可以只使用substring()(。据我所知，它可以是 1 到 3 个字符。

此外，不依赖于jQuery的答案是首选。

Answer 1

这应该可以为您解决问题。正则表达式/^(D*)(.*)/在字符串的前面查找所有非数字字符，并将其保存在第一个匹配组中，然后将字符串的其余部分放在第二个匹配组中。

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];
}

Answer 2

单行，使用String.replace：

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