匹配任何变体的jQuery IndexOf数组

Question

在下面的代码中，我查看了一个数组，如果data属性与该数组匹配，它会在元素后面分配一些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>

​

Answer 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>

​