How to make a parser and a filter?

noriller

Bruno Noriller

Posted on October 11, 2021

How to make a parser and a filter?

I've waited to post this on Monday morning because... well, even if you don't like coffee, more than any morning, the start of the week is certainly for "Coffee and Contemplation".

(I prefer tea, but unfortunately, "Tea and Contemplation" doesn't roll of the tongue.)

Now that you're primed, what am I talking about?

Parser

Parser takes a input (generally text) and transforms it in a data structure that can be used in the following steps.

Filter

Filter is a... filter... that filter things. More enter and less get out.

Anyway...

What can you do if you combine then?

A search engine!

Of course there's a lot more behind the biggest ones you can think, but in essence it's that it.

From the query you create a structure that the filter consumes, and at the end of the pipeline you have the results you want.

Have you ever tried making one?

The easiest thing you can make, and here I'll be using Javascript is something like:

const sourceArray = [`your array with data`];
const queryString = 'probably from a input';

const filteredDataToReturn = sourceArray.filter((element) => {
    return JSON.stringify(element).includes(queryString);
});
Enter fullscreen mode Exit fullscreen mode

I did say the easiest right?

The "more right" way to do it would be:

Object.values(element).includes(queryString)
Enter fullscreen mode Exit fullscreen mode

Which is still really simple.

But far from any search engine

Enters EasyFilter!

EasyFilter print from NPM

Yes, as you might be realizing now... this is a shamelessly self promotion post... but please, I will teach you how to make your own "EasyFilter"!

https://www.npmjs.com/package/@noriller/easy-filter

If you wanted to get even close to a "real" search engine you have to put in the work, and when you're busy doing other things, you just don't have the time to give your users what they expect a search input to be: "Google".

More than just random words, you use quotes and even tag:value pairs... my inspirations were:

  • Google / Gmail
  • Stackoverflow
  • Github

Seriously... check their advanced search... there's so much you can filter!

And with EasyFilter you can simply:

const queryString = `search for something "this between quotes" and then here:"you search for this"`
const filter = EasyFilter(sourceArray)
const filteredResult = filter.search(queryString)
Enter fullscreen mode Exit fullscreen mode

And it will filter just like you expect! It works for single values, quoted values and even values nested inside keys. AND MORE! (Check the documentation!)

You don't need to settle for the easy, you can have it be easy for you and powerful for the users.

How do I make one?

For now... check the docs or the source code. 😋

https://github.com/Noriller/easy-filter

https://github.com/Noriller/easy-filter-parser

And next week, we start at earnest.


Also... EasyFilter ended with as just a warming...

Let's just say you can wait for the... Sequel.

(If you read the docs, you will understand.)


buy me a coffee


Cover Photo by Nathan Dumlao on Unsplash

💖 💪 🙅 🚩
noriller
Bruno Noriller

Posted on October 11, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

tsParticles 1.43.0 Released
javascript tsParticles 1.43.0 Released

April 5, 2022

tsParticles 1.42.1 Released
javascript tsParticles 1.42.1 Released

March 11, 2022

How to make a parser and a filter?
javascript How to make a parser and a filter?

October 11, 2021