フォームに入力したキーワードを検索結果でハイライトして表示する機能をよく見かけるが、その際に上記のように文字列の一部だけを特定のタグで囲みたい場合がある。
ハイライトしたい文字列が静的な場合は特に考慮することもないが、それが動的かつJSXで実装したい場合はどうすればよいか。
解決法
- 対象文字列をセパレーターとし、
String.split()
で分割
- 引数に指定する正規表現を
()
で囲むことで一致した結果も配列に含める
- 対象文字列のみを任意のハイライト用のタグで囲みながらJSXの配列を生成
- 対象文字列が複数箇所あることを想定して
key
を指定
1