Javascript 的精确关键字匹配答案

【问题标题】：Exact Keyword Match for JavascriptJavascript 的精确关键字匹配
【发布时间】：2020-06-25 17:50:13
【问题描述】：

我已经遍及 SO 并找到了许多不同的可能解决方案。我觉得我忽略了一些非常容易的事情。我在键标记过滤器<li> 上的脚本，但我的问题是脚本将返回任何匹配单个字符的<li>。我需要搜索功能来返回单词匹配而不是字符匹配。

function search() {
    var input, filter, ul, li, a, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("p")[0];
        txtValue = a.textContent || a.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}

感谢您的帮助。保持优雅。这是我的JSFiddle

【问题讨论】：

您可以拆分a.textContent的字符串，它会返回字符串（单词）的数组，然后您可以使用includes方法检查字符串是否包含单词
请添加您的 html 代码。但是在this fiddle 中，您的搜索功能似乎可以正常工作。
如果您要查找与字符串完全匹配的内容，我建议您使用 String.match() 和正则表达式。
@Sphinx 我用我的 html 更新了 fiddle。你能看看它，看看我需要改变什么吗？谢谢。
好的，小提琴完美无缺，但由于某种原因它不适用于我的应用程序。 my website 没有正确响应。有什么想法吗？

标签： javascript

【解决方案1】：

我继续整理了一些代码来完成你想要的。 Reg 是 Regex 的一个新实例，用于检查您的单词“filter”是否存在。 \b 这里代表单词边界。它还具有搜索不区分大小写的附加效果，因此您可以使用 toUpperCase() 调用清理一些字符串的规范化。我希望这会有所帮助

function search() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("myInput");
filter = input.value;
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
let reg = new RegExp(`\\b${filter}\\b`, 'gi');
for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("p")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.match(reg)) {
        li[i].style.display = "";
    } else {
        li[i].style.display = "none";
    }
 } 
}

【讨论】：

非常感谢您的宝贵时间。很抱歉浪费了它。我想到了。显然，如果<ul> 中有嵌套的<ol>，函数就会丢失。

【解决方案2】：

我在 <ul> 中有一个嵌套的 <ol>，这使函数感到困惑。我删除了嵌套的，它就像一个魅力。

【讨论】：