Honestly, there are probably cleaner ways to do this without touching the DOM structure ¹ , but this little approach has worked fine for me so far.

Here’s a quick demo:

And the code behind the highlighting:

const const highlightSearchTerm: (searchTerm: string, content: string) => string | (string | JSX.Element)[]highlightSearchTerm = (searchTerm: stringsearchTerm: string, content: stringcontent: string) => {
  if (!searchTerm: stringsearchTerm || !content: stringcontent) return content: stringcontent;

  try {
    const const escapedTerm: stringescapedTerm = searchTerm: stringsearchTerm.
String.replace(searchValue: {
    [Symbol.replace](string: string, replaceValue: string): string;
}, replaceValue: string): string (+3 overloads)
Passes a string and 
{@linkcode 
replaceValue
}
 to the `[Symbol.replace]` method on 
{@linkcode 
searchValue
}
. This method is expected to implement its own replacement algorithm.
@paramsearchValue An object that supports searching for and replacing matches within a string.@paramreplaceValue The replacement text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
    const const regex: RegExpregex = new 
var RegExp: RegExpConstructor
new (pattern: RegExp | string, flags?: string) => RegExp (+2 overloads)RegExp(`(${const escapedTerm: stringescapedTerm})`, "gi");
    const const parts: string[]parts = content: stringcontent.
String.split(splitter: {
    [Symbol.split](string: string, limit?: number): string[];
}, limit?: number): string[] (+1 overload)
Split a string into substrings using the specified separator and return them as an array.
@paramsplitter An object that can split a string.@paramlimit A value used to limit the number of elements returned in the array.split(const regex: RegExpregex);

    return const parts: string[]parts.Array<string>.map<string | JSX.Element>(callbackfn: (value: string, index: number, array: string[]) => string | JSX.Element, thisArg?: any): (string | JSX.Element)[]
Calls a defined callback function on each element of an array, and returns an array that contains the results.
@paramcallbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.@paramthisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.map((part: stringpart, i: numberi) =>
      part: stringpart.String.toLowerCase(): string
Converts all the alphabetic characters in a string to lowercase.toLowerCase() === searchTerm: stringsearchTerm.String.toLowerCase(): string
Converts all the alphabetic characters in a string to lowercase.toLowerCase() ? (
        <JSX.IntrinsicElements.mark: DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>mark Attributes.key?: Key | null | undefinedkey={i: numberi}>{part: stringpart}</JSX.IntrinsicElements.mark: DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>mark>
      ) : (
        part: stringpart
      )
    );
  } catch (function (local var) error: unknownerror) {
    return content: stringcontent;
  }
};

The function takes in two parameters, the search term and the text you are scanning through. If either of them doesn’t exist, it just returns the original content.

Next, it escapes special regex characters. This step is easy to overlook but really important because search terms might include stuff like ., +, or ?, which have special meanings in regex.

For example, try searchin c++ in the example below:

In the first example (escaped), the highlight works perfectly. In the second, it doesn’t because the + was treated as a regex operator, not a literal character.

Here is the line that handles this:

const escapedTerm = searchTerm.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");

That expression basically adds a backslash in front of all regex-special characters so they’re treated as normal text.

After that, we build a regex and wrap our term in parentheses:

const regex = new RegExp(`(${escapedTerm})`, "gi");

The parentheses matter because they keep the matched term in the split result. Without them, it wouldn’t show up at all.

Then we split the content around those matches:

const parts = content.split(regex);

Finally we map through all the parts and if the text matches our search term, we wrap it in a <mark> element:

<mark key={i}>{part}</mark>

We can then style the marked words using CSS like so:

mark {
  background-color: #fffb0d;
}

And that’s pretty much it. Wrapping the logic in a try...catch just makes sure any weird input doesn’t break the whole thing.