如何在包含多内容的div中仅定位购物篮总价并实现金额阈值判断

看起来你遇到的问题是.cart元素里同时混了商品数量和价格，导致原正则把数量的数字也误算进去了——这确实很头疼，不过咱们可以通过更精准的字符串匹配来解决，下面给你两种可行的方案：

方案1：基于欧元价格的特征匹配 #

因为你的价格是带€符号的，我们可以直接定位到这个符号后面的价格部分，完全避开前面的商品数量：

const targetBasketTotal = document.querySelector('.cart');
const cartText = targetBasketTotal.textContent;
// 匹配€符号后跟着的价格（支持空格分隔和逗号小数）
const priceMatch = cartText.match(/€\s*([\d,]+)/);

if (priceMatch) {
  // 把欧元格式的逗号小数转成JS认可的点分隔
  const totalAmount = parseFloat(priceMatch[1].replace(',', '.'));
  console.log('提取到的总价：', totalAmount);
  
  // 输出提示文本（顺便帮你修正了拼写错误：then → than）
  const message = totalAmount < 40 
    ? "<section class='message'>Basket is less than €40</section>"
    : "<section class='message'>Basket is more than €40</section>";
  
  targetBasketTotal.insertAdjacentHTML("afterend", message);
} else {
  console.warn('未在购物篮元素中找到价格信息');
}

这个方案的核心是正则/€\s*([\d,]+)/：它会精准捕获€符号后面的所有数字和逗号，完全不会碰前面的商品数量，处理起来更可靠。

方案2：基于分隔符分割字符串 #

观察你的HTML结构，数量和价格是用|分隔的，那我们可以直接把字符串按|拆分，取后半部分处理：

const targetBasketTotal = document.querySelector('.cart');
const cartParts = targetBasketTotal.textContent.split('|');

if (cartParts.length >= 2) {
  // 取拆分后的第二部分，清理掉多余空格和符号
  const priceText = cartParts[1].trim();
  const totalAmount = parseFloat(priceText.replace(/[^\d,]/g, '').replace(',', '.'));
  console.log('提取到的总价：', totalAmount);
  
  const message = totalAmount < 40 
    ? "<section class='message'>Basket is less than €40</section>"
    : "<section class='message'>Basket is more than €40</section>";
  
  targetBasketTotal.insertAdjacentHTML("afterend", message);
}

这种方法更直观，适合结构固定的场景——只要分隔符|不会变，这个方法就很稳定。

原代码的问题说明 #

你原来的正则/[^0-9\.]/g会把所有非数字和点的内容删掉，导致"10 items | € 38,87"变成"103887"，除以100后得到1038.87，这显然不是你要的总价；另外欧元用逗号做小数分隔符，原代码没处理这个，也会导致转换错误。我在上面的方案里已经把这些问题都修正了，还帮你改了拼写错误（then应该是than）。

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