How to make a parser and a filter?
Tags: javascript, webdev, showdev, typescript
Published: 2021-10-11 13:13:44

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](https://en.wikipedia.org/wiki/Priming_(psychology)), 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:

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

const filteredDataToReturn = sourceArray.filter((element) => {
	return JSON.stringify(element).includes(queryString);
});
```

I did say the easiest right?

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

```js
Object.values(element).includes(queryString)
```

Which is still really simple.

**But far from any search engine**

## Enters [EasyFilter](https://www.npmjs.com/package/@noriller/easy-filter)!

![EasyFilter print from NPM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4clsuczsh9865g5bquou.png)

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](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:

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

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)

[https://github.com/Noriller/easy-filter-parser](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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4mb4rl84w85pw4n6v9wt.png)](https://buymeacoffee.com/noriller)

---

Cover Photo by <a href="[https://unsplash.com/@nate_dumlao?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText](https://unsplash.com/@nate_dumlao?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)">Nathan Dumlao</a> on <a href="[https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)">Unsplash</a>