JavaScript中实现用户输入与关键词数组的模糊匹配

1. 问题背景与传统方法的局限性

在网页开发中，我们经常需要根据用户的表单输入来执行特定的操作。例如，当用户输入某个关键词时，页面滚动到相应区域。最初，开发者可能使用string.prototype.includes()方法来检查用户输入是否包含单个关键词。这种方法非常有效，因为它支持模糊匹配，即只要输入字符串中包含目标关键词即可。

然而，当需求演变为需要针对多个关键词数组进行匹配时，例如，如果一个区域对应着一组关键词（"hiking", "climb", "hike"），开发者可能会尝试使用Array.prototype.indexOf()方法。indexOf()方法用于查找数组中是否存在某个元素，并返回其索引。其核心局限在于它要求精确匹配。这意味着，如果关键词数组中包含"climb"，而用户输入的是"climbing"或"I like climbing"，indexOf()将无法找到匹配项，因为它只查找完全相等的元素。这与我们期望的“包含性”匹配行为不符。

2. 解决方案：filter()与includes()的巧妙结合

为了实现对关键词数组的模糊匹配，即判断用户输入是否包含数组中的任一关键词，我们可以巧妙地结合使用Array.prototype.filter()和String.prototype.includes()方法。

• Array.prototype.filter(): 这个方法会遍历数组中的每个元素，并对每个元素执行一个回调函数。如果回调函数返回true，则该元素会被包含在新数组中；如果返回false，则不包含。
• String.prototype.includes(): 这个方法用于检查一个字符串是否包含另一个字符串（子串），返回true或false。

通过将includes()作为filter()的回调函数，我们可以遍历关键词数组，对数组中的每个关键词，检查它是否被用户输入所包含。如果任何一个关键词被包含，那么filter()返回的新数组将不为空。

3. 实现细节与代码示例

以下是整合了模糊匹配逻辑的JavaScript函数示例。该函数获取用户输入，进行预处理（转换为小写并去除空格），然后与预定义的关键词数组进行匹配，并根据匹配结果执行页面滚动或显示提示信息。

知我AI

一款多端AI知识助理，通过一键生成播客/视频/文档/网页文章摘要、思维导图，提高个人知识获取效率；自动存储知识，通过与知识库聊天，提高知识利用效率。

101

查看详情

立即学习“Java免费学习笔记（深入）”；

function answerQuestion() {
    event.preventDefault(); // 阻止表单默认提交行为

    // 获取用户输入并进行预处理
    let answer = document.getElementById("answer").value;
    answer = answer.toLowerCase().trim(); // 转换为小写并去除首尾空格

    // 定义关键词数组
    const hallasanKeyword = ["hiking", "climb", "hike", "outside"];
    const udoKeyword = ["cycling", "cycle", "bike"];
    const lovelandKeyword = ["art", "fun", "silly"];
    const cityKeyword = ["nightlife", "restaurant", "eat"];

    // 使用 filter() 和 includes() 实现模糊匹配
    // filter() 遍历关键词数组，includes() 检查用户输入是否包含当前关键词
    // 如果 filter() 结果数组的长度大于0，则表示用户输入包含了至少一个关键词
    if (hallasanKeyword.filter(keyword => answer.includes(keyword)).length > 0) {
        // 匹配成功，滚动到相应元素
        const hallasan = document.getElementById("hallasan").offsetTop;
        window.scrollTo({ top: hallasan, behavior: "smooth" });
    } else if (udoKeyword.filter(keyword => answer.includes(keyword)).length > 0) {
        const udo = document.getElementById("udo").offsetTop;
        window.scrollTo({ top: udo, behavior: "smooth" });
    } else if (lovelandKeyword.filter(keyword => answer.includes(keyword)).length > 0) {
        const loveland = document.getElementById("loveland").offsetTop;
        window.scrollTo({ top: loveland, behavior: "smooth" });
    } else if (cityKeyword.filter(keyword => answer.includes(keyword)).length > 0) {
        const city = document.getElementById("city").offsetTop;
        window.scrollTo({ top: city, behavior: "smooth" });
    } else {
        // 未匹配到任何关键词
        alert("抱歉，您输入的内容未能匹配到任何关键词！请尝试其他内容，或浏览页面寻找您感兴趣的！");
    }
}

代码解析：

1. event.preventDefault(): 这是处理表单提交时常见的做法，用于阻止浏览器刷新页面。
2. answer = answer.toLowerCase().trim(): 这一步至关重要。toLowerCase()确保匹配不区分大小写（例如，"Climb"和"climb"被视为相同），trim()则移除用户输入可能带有的多余空格，提高匹配的准确性。
3. hallasanKeyword.filter(keyword => answer.includes(keyword)):
   • hallasanKeyword.filter(...): 对hallasanKeyword数组进行过滤。
   • keyword => answer.includes(keyword): 这是一个箭头函数，作为filter()的回调。对于hallasanKeyword中的每一个keyword，它都会检查用户输入的answer字符串是否包含这个keyword。
   • 如果answer包含keyword，answer.includes(keyword)返回true，该keyword就会被filter()保留在一个新的数组中。
4. .length > 0: 检查filter()返回的新数组的长度。如果长度大于0，说明用户输入至少包含了一个匹配的关键词。
5. window.scrollTo({ top: ..., behavior: "smooth" }): 这是一个现代的平滑滚动API，提供了更好的用户体验。

4. 注意事项与最佳实践

• 大小写和空格处理: 在进行关键词匹配之前，始终将用户输入和关键词都转换为统一的格式（例如，全部小写并去除首尾空格），以确保匹配的准确性和鲁棒性。
• 匹配优先级: 在if/else if结构中，匹配的顺序决定了优先级。如果用户输入同时匹配了多个关键词数组（例如，输入"cycling art"可能同时匹配udoKeyword和lovelandKeyword），只有第一个匹配到的条件块会被执行。根据实际需求，您可能需要调整关键词数组的定义或匹配逻辑。
• 关键词的粒度: 关键词的定义应考虑到用户输入的习惯。例如，如果用户可能输入"mountains"，但关键词只有"climb"，则可能需要将"mountains"也加入关键词列表。
• 用户体验: 当没有匹配到任何关键词时，提供清晰友好的提示信息（如alert()或在页面上显示消息），引导用户尝试其他输入或浏览页面。
• 性能考量: 对于包含大量关键词的数组，或者需要频繁进行匹配操作的场景，这种filter().length > 0的模式通常效率足够。然而，如果关键词数组非常庞大（数千甚至上万个），或者需要处理极其复杂的文本匹配，可能需要考虑更高级的文本搜索算法（如正则表达式或Trie树）。但在大多数网页表单交互场景中，当前方案是高效且易于理解的。

5. 总结

通过将Array.prototype.filter()与String.prototype.includes()结合使用，我们成功地解决了JavaScript中用户表单输入与关键词数组进行模糊匹配的问题。这种方法不仅能够灵活地判断用户输入是否包含预定义关键词，而且代码简洁、易于理解和维护。在实现用户交互功能时，这种技术可以极大地提升用户体验，使应用程序更加智能和响应式。

以上就是JavaScript中实现用户输入与关键词数组的模糊匹配的详细内容，更多请关注php中文网其它相关文章！