Fluo

Fluo is a helper library to help you with all your highlighting needs.

1. Find matches

This function finds all positions of the query in your text.

fluo.findMatches("some great text.", "great")

// Result
[
  { start: 5, length: 5 }
]

After running this function you can also filter out unwanted matches. If you only want to find full words for example.

2. Create highlights

This function builds a list which makes it very easy for you to render your list with any framework.

const matches = fluo.findMatches("some great text.", "great")
fluo.highlights("some great text.", matches)

// Result
[
  { value: "some ", highlighted: false },
  { value: "great", highlighted: true },
  { value: " text.", highlighted: false }
]

You can then loop over this list and render every piece of your text.

3. Highlight a HTML Element

To highlight every match in an HTML Element there is a completely separate function which does not use any of the previous functions.

Original HTML

<div id="myElement">
  <p>
    Some great text here
  </p>
</div>

const element = document.getElementById("myElement")
fluo.highlightHTMLElement(element, "great")

Result HTML

<div id="myElement">
  <p>
    Some <mark>great</mark> text here
  </p>
</div>