Highlight

c2-highlight draws its text with every match of query wrapped in a <mark>, the way a search result list, a command palette or a filtered table shows why a row matched. Matching ignores letter case unless match-case is set; ignore-accents lets cafe match café, whole-word skips matches inside longer words, and words splits the query on spaces and marks each word on its own. Assign an array to the query property to highlight several terms at once. active-index singles out one match for a find bar that steps through them, and the number of matches is the read-only matchCount property, the match-change event and the :state(matched) custom state. The same matcher is exported as findMatches(text, query, options) for code that filters the items it highlights.

Import

import '@c2n/components/highlight'

Usage

import '@c2n/components/highlight'

<div data-label="Query">
  <c2-highlight query="apple">Apple pie, apple tart and pineapple crumble.</c2-highlight>
</div>
<div data-label="Whole words, match case">
  <c2-highlight query="apple" whole-word match-case>Apple pie, apple tart and pineapple crumble.</c2-highlight>
</div>
<div data-label="Every word">
  <c2-highlight query="tart crumble" words>Apple pie, apple tart and pineapple crumble.</c2-highlight>
</div>
<div data-label="Ignore accents">
  <c2-highlight query="creme brulee" ignore-accents>Crème brûlée with a crème fraîche topping.</c2-highlight>
</div>
<div data-label="Current match">
  <c2-highlight query="the" active-index="1">The quick fox jumps over the lazy dog and then the cat.</c2-highlight>
</div>