jQuery IndexOf array that matches any variation

Question

In the below code, I am looking at an array and if the data attribute matches the array, it assigns some HTML after the element.

However, instead of defining each variation in the array, is there a way to use the array keywords to loosely match the attributes instead?

For example. Instead of having an array containing ['games', 'game', 'playstation', 'playstation4'], I could just have ['game', 'playstaion'], and it would match any data attribute containing those words/letters instead of looking for an exact match.

Thanks

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>

Also see this, goes into various ways to filter in js: [https://stackoverflow.com/questions/5324798/how-to-search-an-array-in-jquery-like-sql-like-value-statement/5324925](https://stackoverflow.com/questions/5324798/how-to-search-an-array-in-jquery-like-sql-like-value-statement/5324925) — pnuttbutterking, Jul 15 '21 at 11:32

Jeremy Thille · Accepted Answer · 2021-07-15T11:33:17.547

For instance, you can transform "gam" and "play" into regexes (/gam/ and /play/) and test if the data-tag matches it. This will match anything containing "gam" or "play" anywhere in the string.

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>

Another way to do it could be to have the correct elements selected by jQuery directly, without need for a filter, by constructing a loose selector a[data-tag*=gam], a[data-tag*=play] :

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>

jQuery IndexOf array that matches any variation

1 Answers1