Search code examples
javascriptinputcss-selectorsmixitup

Filter by text input, how can I add RegEx? - Vanilla JS

I'm using Mixitup.js with vanilla Javascript. Here's a working JSFiddle.

When you type in "blue", "green", or "pink" it only shows elements with that class name.

What I want is to filter the results with ReGex, for example by using: new RegExp('^|\\s','gi'). However, I have no idea how to write this properly, nor implement it into the code.

Right now, when you type in "reen", it will still show results for "green". I don't want this. I only want results that match from the beginning of the word (hence ^|).

I've kept the comments in the script from the dev's demo, hopefully that helps. Full demo is here

Thanks for any help!

Solution

  • As I understand, you are using an attribute based selector to select elements where class begins with particular text. But in your example the elements have two classes "mix" and the color name

    class ="mix green"

    Simply using [class^=color class name] will not work.

    Try replacing

    mixer.filter('[class*="' + searchValue + '"]');

    with

    mixer.filter('[class^="mix ' + searchValue + '"]');