Lojban词典网站innerText换行匹配异常问题求助

核心问题 #

搜索u.a时匹配到了含换行的u\n\na条目，事后验证该条目实际并不包含u.a，说明搜索逻辑对文本的处理存在偏差。

可能原因及修复步骤 #

1. 遍历节点范围错误 #

当前代码用id("entries").childNodes遍历所有子节点，其中包含HTML中换行、空格组成的空白文本节点，这类节点的内容可能被误匹配。

修复：改为遍历实际的条目元素（假设条目类名为.entry）：

// 替换原遍历逻辑，只获取条目元素
for (const entry of id("entries").querySelectorAll(".entry")) {
  // ... 原有处理逻辑
}
// 或者用children仅获取元素节点
for (const entry of id("entries").children) {
  // ... 原有处理逻辑
}

2. 空白字符处理不全面 #

仅替换\n无法覆盖所有换行类型（如\r、\r\n）及其他空白字符（制表符、不间断空格等），导致文本处理不彻底。

修复：用\s匹配所有空白字符，统一替换为单个空格：

const text = entry.innerText.replace(/\s+/g, " ").trim();

3. 验证字符编码排查特殊字符 #

若上述修复无效，可打印字符编码确认文本与搜索词的实际内容，排查是否存在看不见的特殊字符（如全角.、非标准空格）：

console.log(
  "文本字符编码:", [...text].map(c => `${c}(${c.charCodeAt(0)})`),
  "搜索词编码:", [...query].map(c => `${c}(${c.charCodeAt(0)})`)
);

修改后的完整search函数示例 #

const id = (x) => document.getElementById(x);
function search(query) {
    let count = 0;
    const results = [];
    // 只遍历目标条目元素
    for (const entry of id("entries").querySelectorAll(".entry")) {
        // 处理所有空白字符并去除首尾空格
        const text = entry.innerText.replace(/\s+/g, " ").trim();
        if (text.includes(query)) {
            console.log(text, query, text.includes(query));
            results.push(entry);
            count++;
        }
    }
    return [count, results];
}

内容的提问来源于stack exchange，提问作者mí ebı