JavaScript使用.split与.includes实现多组完整单词匹配的问题咨询

问题核心原因 #

你现有代码的核心缺陷有两处：

1. 预处理阶段的替换规则错误把空格也清空了，导致后续按空格拆分单词的逻辑完全失效
2. 匹配逻辑仅校验拆分后的单个单词数组是否包含关键词，天然无法支持多词短语匹配，也没有做单词边界校验，才会出现hi被high误匹配的问题

最优解决方案 #

改用带单词边界校验的正则匹配逻辑，可以同时满足多词短语匹配、单单词不被长词误匹配两个需求，修改后的完整代码如下：

var know = {
    // 通用短语
    "Hi": "Hello! &#128075",
    "Hey": "Hello! &#128075",
    "Hello":"Hello &#128075 How can I help?",    
    "how are you":"Not bad, thanks!",
    "Bye":"Have a nice day!",
    "Goodbye":"See you later!", 

    // 目录跳转
    "Help": `You can find help by searching below or by clicking <a href='https://www.page.com/news' target="_blank">here</a>`,
    "contact":  `You can contact us by clicking <a href='https://www.page.com/contact' target="_blank">here</a>`,
    "About": `You can find our About Us page by clicking <a href='https://www.page.com/about' target="_blank">here</a>` 
};

// 新增：转义关键词中的正则特殊字符，避免匹配报错
function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

function goo() {
    var userBox = document.getElementById('userBox');
    var userInput = userBox.value.trim();
    var chatLog = document.getElementById('chatLog');
    var chatLogContent = "";
    var reply = "No results found. Please enter another search term below.<br>";

    if (!userInput) {
        chatLogContent = '';
        return;
    }

    // 统一转小写做大小写不敏感匹配，仅移除标点，保留空格
    var processedInput = userInput.toLowerCase().replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g,"");

    for (var key in know) {
        var lowerKey = key.toLowerCase();
        // 构造带单词边界的正则，保证精确匹配
        var reg = new RegExp(`\\b${escapeRegExp(lowerKey)}\\b`);
        if (reg.test(processedInput)) {
            reply = know[key] + "<br>";
            break;
        }
    }

    chatLogContent += reply;
    var server = document.createElement('div');
    server.setAttribute('class', 'server');
    server.innerHTML = chatLogContent;
    document.getElementById('chatLog').innerHTML = '';
    chatLog.appendChild(server);
}

核心修改点说明 #

• 新增了正则特殊字符转义方法，避免关键词中包含正则符号时出现匹配错误
• 修正了预处理逻辑：仅移除标点符号，保留空格，同时统一转小写实现大小写不敏感匹配
• 替换原有拆分数组匹配逻辑，改用\b单词边界正则：既可以直接匹配how are you这类多词短语，也保证hi这类短单词不会被high等包含它的长单词误匹配
• 简化了原有冗余的状态判断逻辑，匹配到关键词后直接取回复跳出循环，运行效率更高

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