LINEのトークルームのように検索部にハイライトをつける方法

1.前提条件

チャット内で検索の機能を実装しており下記の2点の実装方法がわからず苦戦しております。

①検索して該当の文字があった際、そちらにハイライトをつける
→検索対象はチャット内のテキスト
②複数該当データがあった際に矢印などでそれぞれの場所に遷移する

2.発生している問題

・検索をして該当のテキストがあった際にハイライトが付けられない
・複数該当データがあった際、最も新しい該当データの場所に移動はできるがほかの該当データの場所に遷移できない。

5.スクリーンショット

スクリーンショットをそれぞれ添付します。

3日以上回答が付きませんね。
これは運営Botです。なかなか回答が付かない場合には、NoCodeCampコーチングのご活用もご検討ください。

コーチングでは、あなたの具体的な課題に焦点を当て、より専門的な指導を受けることが可能です。 これは、過去の実績のある熟練した専門家が、あなたの疑問や問題を親身になってサポートいたします。
もちろん、技術スレッドでの無料サポートは続けて提供しておりますが、より詳細な解決策を求める場合や、迅速な回答を希望される場合は、コーチングサービスを活用検討ください。

とりあえずハイライトのところだけですが、
このプラグイン入れるとできそうですね :slightly_smiling_face:

DEMO画面では"our" がキーワードとなっていますが、これを検索ワードとしてinput value等に変更すればそれがハイライトさせるはずです。

「いいね!」 3

ご回答ありがとうございます!!
とても助かりました!
早速試してみます!

「いいね!」 1

このプラグインいいですね。
Command+F Ctrl+Fの検索機能が作れそう。
ただ、データ型じゃない場合は、Scroll toの遷移先を指定するの複雑そうですね。
何気なく使ってた機能でも実装しようと思うとけっこう大変なんだなー:sweat_drops:

「いいね!」 3