使用Cheerio统计HTML词数时单词拼接错误的解决问询

问题根源 #

你的问题出在htmlmin的压缩配置上：collapseWhitespace: true会彻底移除标签之间的所有空白字符，导致压缩后的HTML中<h1>...</h1>和<p>...</p>直接连在一起（<h1>Our Valued Clients</h1><p>At Zubizi Web Solutions,</p>）。Cheerio提取文本时，相邻块级元素的文本就会直接拼接，出现ClientsAt这种错误。

解决方案 #

方案1：调整htmlmin压缩规则，保留标签间必要空格 #

修改htmlmin的collapseWhitespace参数为'conservative'，这个模式会保留块级元素之间的单个空格，避免文本拼接：

.pipe(htmlmin({
    collapseWhitespace: 'conservative', // 替换原true值
    removeComments: true,
    minifyCSS: true,
    minifyJS: true
}))

压缩后的HTML会变成：

<h1>Our Valued Clients</h1> <p>At Zubizi Web Solutions,</p>

此时Cheerio提取的文本自然会有空格分隔，单词拆分正常。

方案2：在Cheerio中手动处理文本拼接（不修改压缩配置） #

如果不想调整压缩规则，可以遍历目标元素，逐个提取文本后用空格连接，从根源避免拼接：

.pipe(cheerio(function ($, file) {
    try {
        // 遍历每个目标子元素，提取并清理文本
        const textSegments = $("body").children(":not(header, footer, script)")
            .map(function() {
                return $(this).text().trim();
            })
            .get()
            .filter(seg => seg.length > 0); // 过滤空内容段

        // 用空格连接所有文本段
        const text = textSegments.join(' ');
        const words = text.split(/\s+/).filter(word => word.length > 0);
        const wordCount = words.length;

        const filename = file.relative;
        if (filename === "clients.html") {
            console.log(words);
        }
        console.log(wordCount, filename);
    } catch (error) {
        console.error(error);
    }
}))

这种方法不受压缩规则影响，每个块级元素的文本都会被空格分隔开。

方案3：优化单词拆分正则（补充方案） #

如果仍有特殊拼接情况，可以优化拆分正则，识别大小写拼接的单词（比如ClientsAt）：

const words = text.split(/\s+|(?=[A-Z])/).filter(word => word.length > 0);

注意：这个正则可能会误拆分缩写（比如HTML5），仅作为补充方案使用。

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