Playground

Try MarkIt interactively. Type in the search box to see real-time highlighting.

0 matches

RendererAutoHighlight APIDOMOverlayAccuracyPartialExactStarts WithComplementaryCase SensitiveIgnore DiacriticsSeparate WordsAcross Elements

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

The café on the résumé was naïve about über-performance. JavaScript and TypeScript developers love working with Angular, React, and Next.js frameworks for building modern web applications.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Highlighting search terms is a common requirement in web applications. Whether it's a documentation search, a code editor, or an e-commerce product filter, fast and accurate text highlighting makes a significant difference in user experience.

Lorem ipsum dolor sit amet again for testing multiple matches. The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

What's Happening

1. As you type, the search term is debounced (150ms) and passed to the MarkIt core engine
2. The text index is built using TreeWalker over all text nodes in the content area
3. Matches are found against the virtual concatenated string in a single regex pass
4. The renderer applies highlights using the selected strategy (DOM wrapping by default)
5. Match count and timing are displayed in real-time

Try these searches:

• Lorem — multiple matches across paragraphs
• cafe with Ignore Diacritics enabled — matches "café"
• the with Exact accuracy — only matches the word "the", not "the" inside "other"
• JavaScript TypeScript with Separate Words — highlights each word independently