如何在WordPress/WooCommerce中用JS DOM提取div和表格内span的数字

核心思路 #

1. 选中页面中所有目标类名的span元素（无论在div还是表格内）
2. 提取每个span的完整文本内容（包含子元素文本）
3. 通过正则匹配提取其中的数字（支持整数、小数）
4. 过滤无效值，整理成数字数组

基础实现代码 #

// 替换成你实际使用的span类名（比如WooCommerce默认价格类是price）
const targetSpanClass = 'price';
const targetSpans = document.querySelectorAll(`span.${targetSpanClass}`);
const extractedNumbers = [];

targetSpans.forEach(span => {
    // 获取span的全部文本内容，自动忽略子元素结构
    const text = span.textContent.trim();
    // 匹配所有数字（整数、小数）
    const numMatches = text.match(/\d+\.?\d*/g);
    
    if (numMatches) {
        numMatches.forEach(numStr => {
            const num = parseFloat(numStr);
            // 过滤非数字值
            if (!isNaN(num)) {
                extractedNumbers.push(num);
            }
        });
    }
});

// 输出结果，可根据需求用于后续逻辑
console.log('提取到的数字：', extractedNumbers);

动态内容适配（处理AJAX加载的元素） #

如果页面内容是通过AJAX动态加载的（比如WooCommerce商品列表分页加载），可以用MutationObserver监听DOM变化，自动处理新增的span：

const targetSpanClass = 'price';
const extractedNumbers = [];

// 复用的单个span处理函数
function handleSpan(span) {
    const text = span.textContent.trim();
    const numMatches = text.match(/\d+\.?\d*/g);
    
    if (numMatches) {
        numMatches.forEach(numStr => {
            const num = parseFloat(numStr);
            if (!isNaN(num)) {
                extractedNumbers.push(num);
            }
        });
    }
}

// 初始化处理已存在的span
document.querySelectorAll(`span.${targetSpanClass}`).forEach(handleSpan);

// 监听DOM变化，处理新增元素
const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
        mutation.addedNodes.forEach(node => {
            if (node.nodeType === Node.ELEMENT_NODE) {
                // 新增元素本身是目标span
                if (node.classList.contains(targetSpanClass)) {
                    handleSpan(node);
                }
                // 新增元素是容器，查找内部的目标span
                const spans = node.querySelectorAll(`span.${targetSpanClass}`);
                spans.forEach(handleSpan);
            }
        });
    });
});

// 监听整个body的子元素变化，可根据实际缩小监听范围（比如商品列表容器）
observer.observe(document.body, {
    childList: true,
    subtree: true
});

console.log('初始提取数字：', extractedNumbers);
// 后续动态加载的数字会自动加入数组

关键说明 #

• 正则/\d+\.?\d*/g：匹配所有整数和小数，可适配带货币符号、单位的文本（比如"¥199.99"、"200USD"都会提取出数字部分）
• 如果只需要每个span中的第一个数字，可把numMatches.forEach改成extractedNumbers.push(parseFloat(numMatches[0]))
• 可根据实际需求调整数字处理逻辑（比如保留两位小数、转为整数等）

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