Display

Highlight Text

Marks every match of a search in a text, ignoring case and accents.

Features5

API

Theming

Basic

Type to mark matches. Cafe also finds Café; the text is never parsed as HTML.

Café Lviv opens at eight. Our second cafe is next to the river, and the third café opens in spring.

14 lines

<tx-icon-field>  <tx-input-icon icon="search" />  <input    txInput    aria-label="Search"    placeholder="Search"    [value]="search()"    (input)="search.set($any($event.target).value)"  />  <tx-input-clear /></tx-icon-field><p class="text">  <tx-highlight-text [text]="text" [highlight]="search()" /></p>

Several terms

highlight also takes a list of terms.

Invoice 1042 was paid on Monday; invoice 1043 is due on Friday.

Search list

Filtering a list and marking what matched.

Kyiv
Lviv
Kharkiv
Ivano-Frankivsk
Chernivtsi

18 lines

<tx-icon-field>  <tx-input-icon icon="search" />  <input    txInput    aria-label="Search cities"    placeholder="Search cities"    [value]="search()"    (input)="search.set($any($event.target).value)"  />  <tx-input-clear /></tx-icon-field><ul class="list">  @for (city of visible(); track city) {    <li><tx-highlight-text [text]="city" [highlight]="search()" /></li>  } @empty {    <li class="empty">No cities found</li>  }</ul>

Case sensitive

caseSensitive matches the case exactly.

API keys, api docs and the Api status page

Design tokens

dt changes the look of the marks.

Deploys run every night at two.

14 lines

<p class="text">  <tx-highlight-text    text="Deploys run every night at two."    highlight="night"    [dt]="{      mark: {        background: 'var(--tx-highlight-background)',        color: 'var(--tx-highlight-color)',        fontWeight: '600',        paddingX: '3px',      },    }"  /></p>