【React】文字列を分割してJSXと結合する

const SAMPLE_TEXT = "サンプルのテキストです。「ここを強調したい」です。";
const SAMPLE_KEYWORD = "「ここを強調したい」";

<p>
  サンプルのテキストです。<mark>「ここを強調したい」</mark>です。
</p>

フォームに入力したキーワードを検索結果でハイライトして表示する機能をよく見かけるが、その際に上記のように文字列の一部だけを特定のタグで囲みたい場合がある。

ハイライトしたい文字列が静的な場合は特に考慮することもないが、それが動的かつJSXで実装したい場合はどうすればよいか。

解決法

const SAMPLE_TEXT = "サンプルのテキストです。「ここを強調したい」です。";
const SAMPLE_KEYWORD = "「ここを強調したい」";

export default function Sample() {
  const keywordRegex = new RegExp(`(${SAMPLE_KEYWORD})`);
  const markedText = SAMPLE_TEXT.split(keywordRegex).map((str, i) =>
    keywordRegex.test(str) ? <mark key={i}>{str}</mark> : <>{str}</>
  );

  return <p>{markedText}</p>;
}

1. 対象文字列をセパレーターとし、String.split()で分割
   • 引数に指定する正規表現を()で囲むことで一致した結果も配列に含める
2. 対象文字列のみを任意のハイライト用のタグで囲みながらJSXの配列を生成
   • 対象文字列が複数箇所あることを想定してkeyを指定