テキストハイライト機能を実装する

はじめに 読書アプリや学習アプリには、テキストの一部を選択してハイライトをつける機能がよくあります。参考書にマーカーペンで印をつけるようなイメージです。 本記事では、JavaScript を用いたハイライト機能の実装例を紹介します。 結果 動作するサンプルプログラムを CodePen で公開しています。 本記事で解説する機能 HTML 文書で、マウスドラッグで選択したテキストにハイライトを適用する ハイライト位置を保存し、ページを再読み込みしても同じ位置にハイライトを表示する 使用する Web API Selection API テキスト選択範囲の取得には Selection API を使用します。 Selection API は、ユーザーが選択したドキュメント部分にアクセスし、操作できる API です。 Window.getSelection() または Document.getSele