javascript - 当 jQuery .match() 从列表项返回部分匹配时，如何将结果限制为完全匹配？

Question

我有一个 jQuery 过滤器函数，它可以在无序列表中搜索任何完全匹配的内容，然后如果找到则删除Class。然而，某些列表项可能包含部分匹配的值，例如 AI 和 AI 道德。如果搜索 AI，则会返回两者，如果搜索 AI Ethics，则只会返回 AI Ethics。

我预计，如果用户搜索 AI，它只会返回带有确切标签 AI 的项目，而不是带有 AI Ethics 的项目。

更新:我发布了此过滤器脚本的最新版本，因为我确实从 .filter() 更改为 .each() 并修改了它以提高可读性。

        $(function () {
            $('#SelectBox-ByType').change(function () {
                let typeKey = $(this).val();
                if (typeKey) {
                    $('ul.tags').each(function (i, e) {
                        let typeValue = $(this).text();
                        if (typeValue.match(typeKey)) {
                            $(this)
                                .parents('.knowledgeBaseItemWrapper')
                                .removeClass('hideByType');
                        } else {
                            $(this)
                                .parents('.knowledgeBaseItemWrapper')
                                .addClass('hideByType');
                        }
                    });
                } else {
                    $('.knowledgeBaseItemWrapper')
                        .removeClass('hideByType');
                }
                parseItems.process();
            });
        });

我也尝试过

if (typeValue === typeKey)

但是这不起作用，因为列表可能很长并且有许多不同的标签。一旦列表中的一项不匹配，即使存在正确的项目，过滤器也会失败。至少使用 .match() 我得到了部分准确的结果。

关于如何修改此过滤器以使其在列表中仅返回完全匹配的任何想法？

更新:到目前为止，答案都集中在过滤 ul 中的每个 li 上。当前的函数不存在这个问题，在当前的实现中，它可以很好地过滤 ul 中的所有 li。

问题是当内容以部分匹配开头时解析单个 li。

下面是 HTML 下拉菜单的部分列表:

    <div class="col-xs-12 col-md-6 form-group">
      <label for="SelectBox-ByType">Categories:</label> 
      <div class="select-input">
        <select name="SelectBox-ByType" id="SelectBox-ByType">
        <option value="" selected>Select a Category...</option>
        <option value="AI">AI</option>
        <option value="AI Bias">AI Bias</option>
        <option value="AI Ethics">AI Ethics</option>
        <option value="AI Facial Recognition">AI Facial Recognition</option>
        <option value="Antitrust">Antitrust</option>
        <option value="Augmented Reality">Augmented Reality</option>
        <option value="Big Tech">Big Tech</option>

这是正在搜索的 HTML 示例:

<div class="knowledgeBaseItemWrapper" id="id1529224">
  <div class="knowledgeBaseItem standardContent">
      <div class="summaryWrapper">
          <div class="titleAnchor">...</div>
          <div class="summary">...</div>
          <ul class="tags">
              <li class="tag">AI Facial Recognition</li>
              <li class="tag">Data Privacy</li>
              <li class="tag">Big Tech</li>
          </ul>

我需要的是一种解析内容的方法，我怀疑我的问题在于 if 语句匹配逻辑:

if (typeValue.match(typeKey))

Answer 1

尝试使用.startWith()字符串方法，似乎是您正在寻找的方法:

$(function () {
  $("#SelectBox-ByType").change(function () {
    let typeKey = $(this).val();
    if (typeKey) {
      $("ul.tags").filter(function (i, e) {
        let typeValue = $(this).text();
        if (typeValue.startWith(typeKey)) {
          $(this)
            .parents(".knowledgeBaseItemWrapper")
            .removeClass("hideByType");
        } else {
          $(this).parents(".knowledgeBaseItemWrapper").addClass("hideByType");
        }
      });
    } else {
      $(".knowledgeBaseItemWrapper").removeClass("hideByType");
    }
    parseItems.process();
  });
});