javascript - 获取数字格式的字符串价格

Question

我正在使用 opencart 3.x 并尝试将价格转换为数字，以便我可以用它进行计算。我不断收到 NaN 或脚本错误:

<h2><span id="getPrice">{{ price }}</span> /Carton</h2>    

这里我将 id 设置为 getPrice，这样我就可以在页面加载后获取价格，结果为 169.99 美元。该号码不能用作号码。这是我遇到的问题。我知道 { {price } } 是 PHP，我相信，但我认为由于数字在我的脚本之前加载，我不必担心它？页面加载后，显示每箱 116.99 美元，我将 { { Price } } 展开，这样我就可以将其转换为数字。

这是我的 JavaScript。我尝试了 parsefloat ，它不起作用，而 toFixed(2) 则 alawys 收到“toFixed 不是函数”错误

const getPrice = document.querySelector("[id^='getPrice']").innerHTML;
const getSquareFeetPerBox = document.querySelector("[id^='input-option']").value;
const costPerSqft = getPrice / getSquareFeetPerBox;
const fixxed = parseFloat(getPrice);
document.getElementById("pricePerSqft").innerHTML = ` ( ${costPerSqft}  /per sqft )`;
console.log(fixxed);    

请帮忙，我已经在这几个小时了，只需要对价格进行简单的计算。我使用 console.log 只是为了查看是否记录了一个数字，但它总是 $116.99 或脚本错误......绝不只是 116.99

提前谢谢你

Answer 1

假设以下 HTML:

<h2><span id="getPrice">$169.99</span> /Carton</h2>  
<input type="text" id='input-option' value="10"></input>
<p id="pricePerSqft"> </p>

使用以下 JS:

const getPrice = document.querySelector("[id^='getPrice']").innerHTML;
const getSquareFeetPerBox = document.querySelector("[id^='input-option']").value;
const fixed = parseFloat(getPrice.slice(1, getPrice.length));
const costPerSqft = fixed / getSquareFeetPerBox;
console.log(costPerSqft)
document.getElementById("pricePerSqft").innerHTML = ` ( ${costPerSqft}  / per sqft );

您应该能够解析该数字。我使用 String#slice 来获取数字，但根据您原始帖子的评论，肯定还有其他方法来获取数字。使用像马克建议的正则表达式听起来是一个不错的选择:)

如果您需要，CodePen 链接在这里:https://codepen.io/travishaby/pen/jRbqMr