Javascript regular expressions with jQuery contain a regular expression extension

Question

I am using the jQuery " contains " extension as shown below:

$.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 RegExp(reg[1], reg[2]).test($.trim(a.innerHTML)); } }); 

I have a table with specific cells that I am trying to format conditionally, so I use the extension in the td selector using the containsRegex function. The problem I am facing is that many of the regular expressions I am trying to use (which I tested on regex javascript testers such as this and they worked) do not work with this function. These are the various lines that I would like to match:

Note that “x” can be ax, t, f, or v, and “X” can be X, T, F, or V. Finally, “(mb)” can be any two lowercase letters az in parenthesis.

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

And here is the code with several regex statements that I use:

  $("td:containsExact('-')").addClass("0 queue"); // - $("td:containsRegex('/[^xtfv*]\([az]{2}\)/g')").addClass("1 active"); // (mb) $("td:containsRegex('/\b[xtfv]\*(?!\()/g')").addClass("2 queue review"); // x* $("td:containsRegex('/\b[xtfv]\*(?:\([az]{2}\))/g')").addClass("3 active review"); // x*(mb) $("td:containsRegEx('/\b[xtfv](?![*\(])/g')").addClass("4 queue"); // x $("td:containsRegEx('/\b[xtfv](?:\([az]{2}\))/g')").addClass("5 active"); // x(mb) $("td:containsRegEx('/\b[XTFV]\*(?!\()/g')").addClass("6 queue review"); // X* $("td:containsRegEx('/\b[XTFV]\*(?:\([az]{2}\))/g')").addClass("7 active review"); // X*(mb) $("td:containsRegEx('/\b[XTFV](?![*\(])/g')").addClass("8 done"); // X 

Most of them skip errors in Chrome. Does anyone have pointers? Is the extension restriction somehow limited?

Thanks in advance for your help!

Answer 1

Ok, I think I understand ... These are the changes I made:

• The bottom five selectors are set to "E" and must be "containsRegex ()"

• I changed containsRegex with a tiny bit, adding a reg command to return to make it more robust:

   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; } 

• All escaped characters in the regular expression must be escaped twice (i.e. \( must be \\( )

• I removed all single quotes to actually help me get distracted

• I deleted the class name numbers. I know that an identifier should not begin with numbers, and I am sure that class names should not begin or be only a number. In any case, this has led some selectors to add the same regular expression (i.e., “X” and “-” look the same, as well as “x * (mb)” and “X * (mb) "using css in the demo).

Anyway, I will update my code with this code and your demo :

 /* 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(/^\\([az]{2}\\)$/)").addClass("active"); // (mb) $("td:containsRegex(/^[xtfv]\\([az]{2}\\)$/)").addClass("active"); // x(mb) $("td:containsRegex(/^[xtfv]\\*\\([az]{2}\\)$/)").addClass("active review"); // x*(mb) $("td:containsRegex(/^[XTFV]$/)").addClass("done"); // X $("td:containsRegex(/^[XTFV]\\*$/)").addClass("queue review"); // X* $("td:containsRegex(/^[XTFV]\\*\\([az]{2}\\)$/)").addClass("active review"); // X*(mb) $("td:containsExact(-)").addClass("queue"); // - 

Answer 2

 "td:containsRegex('/\b[xtfv]\*(?!\()/g')" 

\b inside a string literal means backspace ( "\b" === "\x08" ), while it means interrupting text in a regular expression. Try replacing all \b with \\b .

You must also correctly change \( to [(] , since in JS, "foo\(bar\)" === "foo(bar)" .