匹配任何变体的 jQuery IndexOf 数组

Posted 2023-05-09

【中文标题】匹配任何变体的 jQuery IndexOf 数组

【英文标题】：jQuery IndexOf array that matches any variation

【发布时间】：2021-09-24 07:19:18

【问题描述】：

在下面的代码中，我正在查看一个数组，如果数据属性与数组匹配，它会在元素之后分配一些 html。

但是，除了定义数组中的每个变体之外，有没有办法使用数组关键字来松散地匹配属性？

例如。我可以只使用['game', 'playstaion']，而不是包含['games', 'game', 'playstation', 'playstation4'] 的数组，它会匹配包含这些单词/字母的任何数据属性，而不是寻找精确匹配。

谢谢

var gamingTags = [
  'gaming',
  'games',
  'game',
  'video games',
  'video game',
  'mobile games',
  'twitch',
  'minecraft',
  'videogames',
  'gameplay',
  'x-box',
  'switch',
  'play station',
  'playstation 4'
];


jQuery('a').filter(function(i, e) 
  return gamingTags.indexOf(jQuery(this).attr('data-tag')) > -1
).after("<span title\=\"Gaming Tags\" class\=\"t-tags t-tags-g\"> G </span>");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <thead>
    <tr>
      <th colspan="3" class="thead">
        <h3>HOT Day</h3>
      </th>
    </tr>
    <tr>
      <th>Rank</th>
      <th>Tag</th>
      <th>Count</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td><a data-tag="gaming" href="https://odysee.com/$/discover?t=gaming">gaming</a></td>
      <td>7,152</td>
    </tr>
    <tr>
      <td>2</td>
      <td><a data-tag="flowers" href="https://odysee.com/$/discover?t=flowers">flowers</a></td>
      <td>1,489</td>
    </tr>
    <tr>
      <td>3</td>
      <td><a data-tag="art" href="https://odysee.com/$/discover?t=art">art</a></td>
      <td>5,255</td>
    </tr>
    <tr>
      <td>4</td>
      <td><a data-tag="playstation" href="https://odysee.com/$/discover?t=playstation">playstation</a></td>
      <td>2,352</td>
    </tr>
  </tbody>
</table>

【问题讨论】：

也看到这个，进入js中过滤的各种方式：https://***.com/questions/5324798/how-to-search-an-array-in-jquery-like-sql-like-value-statement/5324925

【参考方案1】：

例如，您可以将“gam”和“play”转换为正则表达式（/gam/ 和 /play/）并测试数据标签是否匹配。这将匹配字符串中任何位置包含“gam”或“play”的任何内容。

var gamingTags = [
  'gam',
  'play'
];


jQuery('a').filter(function(i, e) 
  const dataTag = jQuery(this).attr('data-tag');
  return gamingTags.some( tag => new RegExp(tag).test(dataTag) );
).after("<span title\=\"Gaming Tags\" class\=\"t-tags t-tags-g\"> G </span>");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <thead>
    <tr>
      <th colspan="3" class="thead">
        <h3>HOT Day</h3>
      </th>
    </tr>
    <tr>
      <th>Rank</th>
      <th>Tag</th>
      <th>Count</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td><a data-tag="gaming" href="https://odysee.com/$/discover?t=gaming">gaming</a></td>
      <td>7,152</td>
    </tr>
    <tr>
      <td>2</td>
      <td><a data-tag="flowers" href="https://odysee.com/$/discover?t=flowers">flowers</a></td>
      <td>1,489</td>
    </tr>
    <tr>
      <td>3</td>
      <td><a data-tag="art" href="https://odysee.com/$/discover?t=art">art</a></td>
      <td>5,255</td>
    </tr>
    <tr>
      <td>4</td>
      <td><a data-tag="playstation" href="https://odysee.com/$/discover?t=playstation">playstation</a></td>
      <td>2,352</td>
    </tr>
  </tbody>
</table>

另一种方法是通过构造一个松散的选择器a[data-tag*=gam], a[data-tag*=play] 直接由 jQuery 选择正确的元素，而不需要过滤器：

var gamingTags = [
  'gam',
  'play'
];

const selectors = gamingTags.map( tag => `a[data-tag*=$tag]` ).join(",")

jQuery(selectors).after("<span title\=\"Gaming Tags\" class\=\"t-tags t-tags-g\"> G </span>");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <thead>
    <tr>
      <th colspan="3" class="thead">
        <h3>HOT Day</h3>
      </th>
    </tr>
    <tr>
      <th>Rank</th>
      <th>Tag</th>
      <th>Count</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td><a data-tag="gaming" href="https://odysee.com/$/discover?t=gaming">gaming</a></td>
      <td>7,152</td>
    </tr>
    <tr>
      <td>2</td>
      <td><a data-tag="flowers" href="https://odysee.com/$/discover?t=flowers">flowers</a></td>
      <td>1,489</td>
    </tr>
    <tr>
      <td>3</td>
      <td><a data-tag="art" href="https://odysee.com/$/discover?t=art">art</a></td>
      <td>5,255</td>
    </tr>
    <tr>
      <td>4</td>
      <td><a data-tag="playstation" href="https://odysee.com/$/discover?t=playstation">playstation</a></td>
      <td>2,352</td>
    </tr>
  </tbody>
</table>