jQuery .match() with an array - method?

Question

When I store multiple regular expressions inside an array (so that I can manipulate the array later), it seems that .match() does not recognise them.

I've tested with a single expression (not an array) and this is fine, but when I try and match multiple expressions in an array, I don't get a result.

Please see below snippet with comments for a demonstration.

$(function() {

  // Set global variable to call later
  var regexMarkers;
  
  // New array in which we store our regular expressions
  var markers = [];

  // When button is clicked...
  $('.z-btn-i').click(function() {

    // Declare some variables
    var $this = $(this);
    var me = $this.attr('data-marker');
    
    // Make it clear that this regex is in the array now
    $this.toggleClass('bold');

    // Add/remove regular expressions from array
    if (markers.indexOf(me)!=-1) {
        markers.splice(markers.indexOf(me),1);
    } else {
        markers.push(me);
    }
    
    // This works (just a single regular expression) but I want it to work with multiple regexps
    // regexMarkers = new RegExp(markers, 'gi');
    
    // So here's me trying multiple regexps (an array of regular expressions) - but this code doesn't work
    regexMarkers = markers.map(m => new RegExp(m, 'gi'));

    // Click all three buttons and you can see that the multiple regexps are showing individually inside the array
    console.log(regexMarkers);
  });
  
// Debugging to see if .matches() works with the array (it doesn't - whereas with the single expression it does.
$('.z-btn-i').click(function() {  

    // If regexmarkers works, then match any text with it. if not, return 'true'.
    var zuluResult = regexMarkers ? $('.text').text().match(regexMarkers) : true;
    
    // Unfortunately it doesn't run and you'll see 'true' returned. So why is this?
    console.log(zuluResult);
    });

});

.bold {
  font-weight: 900;
}

.red {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="z-btn-i" data-marker="Apples">Apples</button>
<button class="z-btn-i" data-marker="Pears">Pears</button>
<button class="z-btn-i" data-marker="Oranges">Oranges</button>

<br>
<br>

<p class="text">I like Apples, but I don't like Pears or Oranges.</p>

How would I be able to get the .match() method to recognise each individual regex in my array?

Is it a must to use .match() function? You didn't use Regex in your example. You can use .indexOf() function for simplicity. — Raptor
– Raptor, Commented Mar 22, 2021 at 4:42
@Raptor yes it has to use match. Could you provide a working example using indexOf? — Teebling
– Teebling, Commented Mar 22, 2021 at 6:09

Kita · Accepted Answer · 2021-03-23 07:43:36Z

1

String.prototype.match() expects a single regexp object.

When regexMarkers is an array, $('.text').text().match(regexMarkers) would probably throw an error.

I used Array.prototype.some() to test if any of the regexps match the text.

// indents for the sake of readability only
var zuluResult = 
    regexMarkers ? 
        regexMarkers.some(regex => regex.test( $('.text').text() ))
        : true;

Here is a simplified test case: https://jsfiddle.net/0usogfv5/

edited Mar 23, 2021 at 7:43

answered Mar 22, 2021 at 4:56

Kita

2,62420 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Teebling Over a year ago

Thanks for this. But it's still just returning 'True' which means the regex matches aren't working.

Teebling Over a year ago

I managed to get it working - was just a small typo which I have updated in my question. It matches 'any' of the strings in the array now yay :) Question: how would I get it to only return results if they match ALL of the expressions inside the array (not any)?

Teebling Over a year ago

Okay managed to do this ^ with .every() instead of .some().

Collectives™ on Stack Overflow

jQuery .match() with an array - method?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related