The following steps show how to use findr from very basic to more advanced use. While you move forward through the steps the code preview and the UI preview will change, feel free to explore and try to interact with all of it.

For this example we will start with an example function that will be used by our UI to render the results of findr.

1. Add some dummy text​

First lets add some dummy source text to search on.

2. Add findr​

Now let's add findr in the mix

3. Let's use findr​

Finally, let's use finder and pass in some props. You should now get some results.

As you can see we already have some results, take a look at the results. Now we need to get some context, let's do that.

4. Getting some context​

Pass in a config prop to fnr. ctxLen will tell fnr how much context we want to get around our matched result.

Oh, looks like some words sneaked into our results. We only wanted the word "nostrud" not words that contained it.

5. Selecting only whole words​

Let's pass the isWordMatched config param to fnr.

Now we have the right results, but these are matching the casing of our target, we also want to find words that have different casing.

6. Making a case sensitive search​

Let's use the isCaseMatched config param.

We found two more words, now we can replace them.

7. Replacing​

Let's add a replacement string.

Our UI shows us a preview of how these replacement strings will look like. As you can see, even when the word found starts with an uppercase letter, the replacement result starts with the same case as our replacement input, so let's add a new configuration parameter.

8. Preserving casing​

Let's add the isCasePreserved config param.

Now if our match starts with uppercase, the replacement string will also start with uppercase. So far we have not replaced anything, for that we need to pass to findr the list of results we want to replace.

9. Actually replacing​

If you pass replacementKeys to fnr it will replace those results and return a replaced string which contains the whole source string with changes applied to it.

You can see our list of results got smaller, after passing the resultKeys fnr will return a new list of results, and a new replaced source which you see in the UI by clicking the Replaced tab. Now let's replace all.

10. Replace all​

replacementKeys also accepts a string with a value of "all", let's change it to that.

You can see now we are getting 0 results. And the replaced tab contains a new source with all our newly replaced content. Now let's go back to our original source and say we wanted to replace all text that is enclosed by the « » characters. For that let's use RegEx.

11. Supporting RegEx​

Let's add a the isRegex config param, and add some RegEx to our target param.

Excellent, we've now found all text that is surrounded by « and », let's say we wanted to keep that inner text but remove the surrounding characters, for that let's use replacement patterns, and change our target prop a little to store the part we want to keep.

12. Using replacement patterns​

We surrounded with parentheses the part of the Regex we want to store, and then for the prop replacement we changed it to $1 ro refer to the first (and only) stored part of the Regex.

Great! Fnr stored every string that matched the Regex expression in parentheses and we were able to access that by using $1.

This covers all the basic features and a little more . If you need more, there is an API you can look at. You can play with this example yourself on our codesandbox: https://codesandbox.io/s/findr-text-c9juk6