如何拆分无分隔符的网页抓取数据？Matchbook数据提取问题

嘿，我来帮你搞定这个问题！你现在遇到的情况是因为直接获取了整个.mb-runner元素的textContent，它会把这个元素下所有子节点的文本毫无分隔地拼接在一起，自然就出现了一堆连成片的数据。

其实我们可以换个思路，不用直接取整行的文本，而是定位到每个具体的数据子元素，这样就能轻松拿到分隔清晰的内容了。下面给你几个靠谱的解决方案：

方案1：遍历子元素提取文本（通用可靠） #

这种方法不需要依赖特定类名，直接把目标元素下的所有子元素文本提取出来，过滤掉空内容后就是分开的数据项：

function scrape(){ 
  const row = document.querySelectorAll(".mb-runner")[0];
  // 把所有子元素的文本提取出来，清理空格并过滤空文本
  const splitData = Array.from(row.children)
    .map(el => el.textContent.trim())
    .filter(text => text.length > 0);
  console.log(splitData);
}
setInterval(scrape, 1000);

运行后你会得到一个数组，每个元素对应一个独立的数据项（比如球队名、单个赔率、单个金额），完全不会混在一起。

方案2：按类名精准定位（结构更清晰） #

如果你打开浏览器开发者工具（按F12）查看页面元素，会发现每个数据项其实都有对应的类名（比如球队名可能是.mb-team，赔率是.mb-odds，金额是.mb-stake这类），我们可以直接通过类名抓取对应数据，整理成结构化的结果：

function scrape(){ 
  const row = document.querySelectorAll(".mb-runner")[0];
  // 替换成你实际在页面中找到的类名
  const teamName = row.querySelector(".mb-team-name")?.textContent.trim();
  const odds = Array.from(row.querySelectorAll(".mb-odds-value"))
    .map(el => el.textContent.trim());
  const stakes = Array.from(row.querySelectorAll(".mb-stake-amount"))
    .map(el => el.textContent.trim());
  
  // 输出结构化的对象，看起来更清楚
  console.log({
    球队名称: teamName,
    赔率列表: odds,
    金额列表: stakes
  });
}
setInterval(scrape, 1000);

这种方法的好处是数据结构一目了然，后期处理起来更方便，你只需要根据网页实际的类名调整选择器就行。

方案3：正则表达式拆分（备选方案） #

如果实在只能处理拼接后的字符串，也可以用正则来拆分，但这种方法稳定性差一点——万一页面文本格式变了，正则就失效了。比如针对你给出的字符串，我们可以写这样的正则：

function scrape(){ 
  const rowText = document.querySelectorAll(".mb-runner")[0].textContent;
  // 匹配球队名（大写开头的单词）、赔率（带小数点的数字）、金额（$开头的金额格式）
  const regexPattern = /([A-Z][a-z]+)|(\d+\.\d+)|(\$\d+(?:,\d+)?)/g;
  const splitData = rowText.match(regexPattern) || [];
  console.log(splitData);
}
setInterval(scrape, 1000);

这个正则会把球队名、每个赔率、每个金额都匹配出来，但如果球队名是多词或者有特殊字符，可能就需要调整正则了，所以优先推荐前两种方法。

总的来说，直接操作DOM元素提取子节点文本是最可靠的方式，毕竟网页的DOM结构比文本格式要稳定得多～

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