Regex for each object in jquery array

Question

When a button is clicked, it's data-marker attribute is added to (or removed from) the array markers.

So for example if I've clicked all three of the buttons - Apples, Oranges and Pears, the markers array will read [Apples,Oranges,Pears]. This is working fine.

I then want to do a new regex for each object in the array, but I don't know how.

Currently when I call the regex it just does the whole array as a string, and the resulting regex looks like this:

/Apples,Oranges,Pears/gi

But I want it to do a new regex for each object in the array, like this:

/Apples/gi
/Oranges/gi
/Pears/gi

How can I do this? Working snippet of what I have so far below:

  // Create new array to store data-marker values
  var markers = [];

  // Declare global variable for use later
  var qsRegexx;
  
  // When user clicks any button having class 'z-btn-i'...
  var $quickfilter = $('.z-btn-i').click(function() {
    
    // Store some more variables
    var $this = $(this);
    var datamarker = $this.attr('data-marker');
    
    // Add or remove the value of the button's data-marker attribute to/from the array 'markers'
    if (markers.indexOf(datamarker)!=-1) {
        markers.splice(markers.indexOf(datamarker),1);
    } else {
        markers.push(datamarker);
    }
    
    console.log(markers);
    console.log(qsRegexx);
    
    // THIS IS WHERE I'M STUCK
    // I want to do a new regex for each object in the array 'markers', not one regex of all of them together...
    qsRegexx = new RegExp(markers, 'gi');
    
  });

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

Tushar Gupta - curioustushar · Accepted Answer · 2021-03-22 01:09:24Z

5

Loop over the array of records create a new regex for each of them individually

.map

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

const regexMakers = markers.map(marker => new RegExp(marker, 'gi'));
console.log(regexMakers);

  // Create new array to store data-marker values
  var markers = [];

  // Declare global variable for use later
  var qsRegexx;
  
  // When user clicks any button having class 'z-btn-i'...
  var $quickfilter = $('.z-btn-i').click(function() {
    
    // Store some more variables
    var $this = $(this);
    var datamarker = $this.attr('data-marker');
    
    // Add or remove the value of the button's data-marker attribute to/from the array 'markers'
    if (markers.indexOf(datamarker)!=-1) {
        markers.splice(markers.indexOf(datamarker),1);
    } else {
        markers.push(datamarker);
    }
    
    console.log(markers);
    
    const regexMakers = markers.map(marker => new RegExp(marker, 'gi'));
    console.log(regexMakers);

  });

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

answered Mar 22, 2021 at 1:09

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

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

3 Comments

Teebling Over a year ago

Thank you Tushar - this returns an array with the regex expressions for each object in the array, yay :) What if I want to run each of the regex from that array afterwards like this? $this.text().match(regexMakers); This doesn't seem to work... ^

Tushar Gupta - curioustushar Over a year ago

@Teebling you can do regexMakers.map(rx => rx.exec($this.text()));

Teebling Over a year ago

Hey @Tushar, thanks - could you please tell me how I could integrate that into the below function? function() { var myResult = regexMakers ? $this.text().match(regexMakers) : true; return myResult; }

Collectives™ on Stack Overflow

Regex for each object in jquery array

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