如何使用JavaScript提取bdi标签中的纯数字（排除货币符号）

嘿，这问题我太熟了！针对你给出的WooCommerce价格HTML结构，这里有几个实用的JavaScript方案，帮你精准提取bdi标签里的数字内容，完全排除货币符号：

方法一：直接定位bdi元素，正则清理文本 #

这是最直接的方式，先定位到目标bdi元素，再通过文本处理提取纯数字：

// 定位到bdi元素（利用WooCommerce的类名确保准确性）
const bdiElement = document.querySelector('span.woocommerce-Price-amount bdi');
if (bdiElement) {
  // 1. 去除文本中的多余空格和引号（你的示例里数字带引号）
  const cleanedText = bdiElement.textContent.trim().replace(/"/g, '');
  // 2. 剔除所有非数字、非小数点的字符（适配带小数的价格）
  const priceStr = cleanedText.replace(/[^0-9.]/g, '');
  // 3. 转成数字类型（可选，根据需求决定是否保留字符串）
  const numericPrice = parseFloat(priceStr);
  console.log(numericPrice); // 输出: 678
}

方法二：跳过货币符号span，提取剩余文本 #

如果货币符号的位置固定在单独的span里，也可以直接移除这部分内容来获取数字：

const priceContainer = document.querySelector('span.woocommerce-Price-amount');
if (priceContainer) {
  // 获取货币符号元素的文本内容
  const currencySymbol = priceContainer.querySelector('.woocommerce-Price-currencySymbol').textContent;
  // 移除货币符号、清理空格和引号后提取数字
  const priceStr = priceContainer.textContent.replace(currencySymbol, '').trim().replace(/"/g, '');
  const numericPrice = parseFloat(priceStr);
  console.log(numericPrice); // 输出: 678
}

处理多个价格元素的场景 #

如果页面上有多个商品价格，用querySelectorAll遍历处理即可：

const allPriceBdis = document.querySelectorAll('span.woocommerce-Price-amount bdi');
allPriceBdis.forEach(bdi => {
  const cleanedText = bdi.textContent.trim().replace(/"/g, '');
  const priceStr = cleanedText.replace(/[^0-9.]/g, '');
  console.log(parseFloat(priceStr));
});

小提示：如果你的价格不会有小数，也可以把正则改成/[^0-9]/g，只保留整数~

内容的提问来源于stack exchange，提问作者Ilham Mohomed