Skip to main content

Basic highlighting

Highlight every occurrence of one or more search terms in a string.

React is a JavaScript library for building user interfaces. Most React apps use components, JSX, and the React hooks API. You can adopt React incrementally — even a single React component inside a legacy page is enough to feel the React rendering model.

Minimal example​

import { Highlight } from 'one-more-highlight';

<Highlight
  text="hello world hello"
  searchWords={['hello']}
  highlightClassName="my-mark"
/>

Each matched substring is wrapped in a <mark> element with the class you pass to highlightClassName.

Multiple search terms​

<Highlight
  text="The cat sat on the mat"
  searchWords={['cat', 'mat']}
  highlightClassName="hl"
/>

All terms are matched in a single pass. Overlapping matches default to merge strategy.

Case sensitivity​

By default matching is case-insensitive. Pass caseSensitive to change this:

<Highlight
  text="Hello hello HELLO"
  searchWords={['hello']}
  highlightClassName="hl"
  caseSensitive
/>
// Only matches "hello" (lowercase)

Auto-escaping​

String terms are auto-escaped by default, so 'c++' matches the literal string c++ rather than being treated as a regex. Disable with autoEscape={false} if you want to pass regex syntax in string form.

Using RegExp directly​

<Highlight
  text="color colour"
  searchWords={[/colou?r/i]}
  highlightClassName="hl"
/>

RegExp objects are always cloned with the g flag forced on. The y (sticky) flag is dropped with a dev warning.