如何去除web scraper中的多余\r\n？async爬取表格时.match()换行符移位问题

核心问题原因 #

出现换行堆在表格底部的现象，是两个实现疏漏叠加导致的：

• 原正则默认规则下.无法匹配\r、\n类换行符，抓取到的table内部内容残留了大量源码里的回车、换行字符串。这类纯文本节点在HTML严格的表格解析规则下，不会被判定为table内部的合法内容，会被自动抛出到table元素的最外层下方，视觉上就像所有换行都堆到了表格底部
• String.match()的返回值是数组结构，直接赋值给innerHTML时会自动调用数组的toString方法拼接内容，容易引入格式异常

具体修改步骤 #

• 调整正则规则，开启dotAll模式允许匹配换行符，使用非贪婪匹配避免抓取超出table闭合范围的内容
• 匹配完成后主动清理所有多余的\r、\n字符，消除对HTML解析的干扰
• 取匹配结果的第一个元素（即完整的table内部内容）再做赋值，避免数组拼接带来的格式问题

修改后的可运行代码 #

var fetchCommand = "https://api.allorigins.win/get?url=" + encodeURIComponent("sampleurl");
(async () => {
    const response = await fetch(fetchCommand);
    const text = await response.text();
    // 正则增加s修饰符开启dotAll支持，非贪婪匹配table闭合标签前的内容
    const matchResult = text.match(/(?<=<table>)([\s\S]*?)(?=<\/table>)/s);
    // 空值判断避免无匹配时报错
    if (!matchResult) return;
    // 清理所有回车、换行字符
    const cleanTableContent = matchResult[0].replace(/[\r\n]+/g, "");
    console.log(cleanTableContent);
    let html_content = document.getElementById("table");
    html_content.innerHTML = cleanTableContent;
    return html_content;
})()

补充优化说明 #

• 如果清理后仍存在多余空白，可将替换规则调整为/[\s\r\n]+/g，替换为单个空格即可，不会破坏表格内部结构的正常渲染
• 若后续出现匹配不到内容的情况，是因为allorigins接口返回的是包装后的JSON结构，可先通过JSON.parse(text)取出真实网页源码字段，再做正则匹配，避免转义字符干扰匹配结果

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