Logo
Back

How to use a regular expression in a jQuery selector?

jQuery does not provide a built-in way to directly use a regular expression within its standard selectors (e.g., $('div')). However, you can achieve regex-like filtering with:

  1. A custom filter or
  2. The :contains() or :not() pseudo-classes combined with your own logic, or
  3. Collecting elements via a broader selector, then applying JavaScript’s native regex methods on each.

Below are some common approaches.

1. Use the filter() Method with a Regex Test

If you want to select all elements of a certain type (e.g., all <div>s) and then filter them by a condition that involves regex, you can do something like:

$('div').filter(function() {
  const text = $(this).text();
  // Example regex: looking for digits
  return /\d+/.test(text);
}).css('background-color', 'yellow');
  1. $('div'): Select all <div> elements in the document.
  2. .filter(...): Evaluate a callback for each <div> to decide if it should remain in the set.
  3. /\d+/.test(text): Return true if the <div>’s text contains digits, for example.
  4. .css('background-color', 'yellow'): Do something with the filtered set (highlight in yellow).

2. Custom Selector via jQuery.expr.pseudos

jQuery allows you to define a custom pseudo-selector that can incorporate regex logic. For example:

$.expr.pseudos.regexText = function(elem, index, meta) {
  // meta[3] is everything after the colon
  const regex = new RegExp(meta[3]);
  return regex.test($(elem).text());
};

// Then use your custom pseudo-selector:
$('div:regexText(\\d+)').css('border', '1px solid red');
  • In older jQuery versions, you might use $.expr[':'].regexText = ... instead of $.expr.pseudos.
  • Note: This is somewhat hacky. Also, jQuery might strip or parse the meta[3] string in unexpected ways, so you often need to escape backslashes carefully.

3. Using grep() for More Flexible Logic

You can also combine $.grep() with a broad selection:

var allDivs = $('div').get(); // get() yields a plain array
var matched = $.grep(allDivs, function(div) {
  return /hello/i.test($(div).text());
});

// matched is now an array of DOM elements
$(matched).css('color', 'blue');
  • $.grep(array, callback) returns an array of items for which callback returns true.
  • Here, we convert the jQuery object to an array with .get(), then filter with a regex, and wrap the results in jQuery again.

4. :contains() or :not() with Regex-Like Patterns

jQuery’s :contains(text) is a plain substring search, not a regex. If you want something “like” a regex but just for partial matching, you can do something like:

$('div:contains("some substring")').css('font-weight', 'bold');

But this will not handle advanced patterns (like character classes or quantifiers).

5. Summary of Approaches

  1. Select Broadly, Then Filter with Regex

    • e.g., $('div').filter(...) using JS regex.
    • Typically the most straightforward method.

  2. Define a Custom Pseudo-Selector

    • A more advanced approach if you want $('div:regexText(...)'), but can be tricky with escaping, maintenance, etc.

  3. Use $.grep()

    • Another array-based approach for advanced filtering logic.

Because jQuery’s native syntax does not interpret regex, the common pattern is:

  • Select a group of elements (like $('div')),
  • Filter them using JS logic (.filter(), .test(), or $.grep()).

Bonus: Strengthen Your jQuery & Interview Skills

If you’re improving your jQuery or preparing for coding interviews, consider these DesignGurus.io resources:

  1. Grokking the Coding Interview: Patterns for Coding Questions

    • Develop a solid approach to common coding challenges, great for interviews and real-world dev tasks.

  2. Grokking System Design Fundamentals

    • For higher-level design thinking in interviews or complex web applications.

Looking for personalized feedback? Check out:

And explore free system design & coding pattern videos on the DesignGurus.io YouTube channel.

Summary: Since jQuery doesn’t allow direct regex in selectors, you typically:

  1. Select broadly (e.g., all <div>),
  2. Filter with .filter() or $.grep() using a JavaScript regex test.
CONTRIBUTOR
TechGrind