JSFiddle - React, Tailwind, and code Playground

by Mottie

HTML

<table>
    <thead><tr><th>class</th><th>review</th></tr></thead>
    <tbody>
        <tr><td></td><td>abcde f gh i jk lmnop qrs t u v w x yz</td></tr>
        <tr><td>0 queue</td><td>-</td></tr>
        <tr><td>1 active</td><td>(mb)</td></tr>
        <tr><td>2 queue review</td><td>x*</td></tr>
        <tr><td>3 active review</td><td>x*(mb)</td></tr>
        <tr><td>4 queue</td><td>x</td></tr>
        <tr><td>5 active</td><td>x(mb)</td></tr>
        <tr><td>6 queue review</td><td>X*</td></tr>
        <tr><td>7 active review</td><td>X*(mb)</td></tr>
        <tr><td>8 done</td><td>X</td></tr>
    </tbody>
</table>

CSS

.queue { color: #0f0; background: #055; }
.active { color: #f00; }
.review { color: #00f; }

.queue.review { background: #aaa; }
.active.review { background: #666; }
.done { background: #000; color: #fff; }

td { padding: 0 10px; }

JavaScript

/* jQuery selector to match exact text inside an element
 *  :containsExact()     - case insensitive
 *  :containsExactCase() - case sensitive
 *  :containsRegex()     - set by user ( use: $(el).find(':containsRegex(/(red|blue|yellow)/gi)') )
 */
$.extend($.expr[':'],{
 containsExact: function(a,i,m){
  return $.trim(a.innerHTML.toLowerCase()) === m[3].toLowerCase();
 },
 containsExactCase: function(a,i,m){
  return $.trim(a.innerHTML) === m[3];
 },
 containsRegex: function(a,i,m){
  var regreg =  /^\/((?:\\\/|[^\/])+)\/([mig]{0,3})$/,
   reg = regreg.exec(m[3]);
  return reg ? RegExp(reg[1], reg[2]).test($.trim(a.innerHTML)) : false;
 }
});

// -, (mb), x*, x*(mb), x, x(mb), X*, X*(mb), X

$("td:containsRegex(/^[xtfv]$/)").addClass("queue");  // x
$("td:containsRegex(/^[xtfv]\\*$/)").addClass("queue review"); // x*
$("td:containsRegex(/^\\([a-z]{2}\\)$/)").addClass("active"); // (mb)
$("td:containsRegex(/^[xtfv]\\([a-z]{2}\\)$/)").addClass("active");  // x(mb)
$("td:containsRegex(/^[xtfv]\\*\\([a-z]{2}\\)$/)").addClass("active review"); // x*(mb)

$("td:containsRegex(/^[XTFV]$/)").addClass("done");  // X
$("td:containsRegex(/^[XTFV]\\*$/)").addClass("queue review");  // X*
$("td:containsRegex(/^[XTFV]\\*\\([a-z]{2}\\)$/)").addClass("active review");  // X*(mb)

$("td:containsExact(-)").addClass("queue"); // -