FTxTextHighlight

A component for highlighting text within a string, useful for search results.

Props

Prop	Type	Default	Description
text	String	''	The text to display
query	String	''	The search query to highlight
caseSensitive	Boolean	false	Case-sensitive matching
highlightClass	String	'highlight'	CSS class for highlighted text

Usage

<template>
  <FTxTextHighlight
    :text="'Hello World'"
    :query="'world'"
  />
</template>

<script setup>
import { FTxTextHighlight } from '@ftx/ui';
</script>

Exported Utilities

• indicesOf(text, query, caseSensitive) - Find all indices of query in text
• mergeRange(ranges) - Merge overlapping ranges