▲TOPへ戻る

【javascript】getRangeAt()を使って、選択したテキストにCSSをあててハイライトさせる

getRangeAt

やりたいこと

前回は、マウスで選択した文字列をテキストエリアに書き出す方法について紹介しました。

js
【javascript】マウスで選択した文字列の取得 getSelection

今回は、以下のようにマウスで選択した文字列に、 ハイライトを追加する方法について紹介します。

参考

html
【HTML】【CSS】iframeタグの使い方 HTMLファイルを埋め込む方法

getRangeAt()とは?

getRangeAt()は、Selectionのメソッドで、 インデックス番号を指定して、選択範囲を表すRangeを取得します。

選択した範囲が一か所であれば、引数は0です。

let selection = document.getSelection();
let range = selection.getRangeAt(0);

参考

SYNSER Selection.getRangeAt()

選択した範囲の文字列にハイライトを追加する

javascript

4~8行目 : spanを生成。クラスを追加し、選択範囲の文字列を挿入。

10行目 : 選択範囲をいったんすべて削除。

12行目 : 削除した部分に生成したspanを挿入。

16行目 : マウスアップした時に処理する。

function highlight() {
  let sel = document.getSelection();
  let range = sel.getRangeAt(0);
  let newNode = document.createElement("span");
  // spanにクラスを追加
  newNode.classList.add("highlight");
  // spanに文字を挿入
  newNode.innerHTML = sel;
  // 範囲した部分を削除
  range.deleteContents(); 
  // 範囲した部分にspanを挿入
  range.insertNode(newNode);
}

// マウスアップした時に処理
document.addEventListener("mouseup", highlight);

CSS

先ほど追加したクラスにCSSを指定しておきます。

.highlight {
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background: linear-gradient(transparent 0%, #ffff66 60%);
}

参考

html
CSS 蛍光ペンで文字を強調する方法

まとめ

以上、選択範囲の文字列にハイライトを追加する方法を紹介しました。

  1. getRangeAt(0)で選択した範囲を取得
  2. createElementで、spanを生成。クラスを追加し、選択範囲の文字列を挿入。
  3. deleteContents()で、選択範囲をいったんすべて削除。
  4. insertNode()で、削除した部分に生成したspanを挿入。
  5. マウスアップ(mouseup)した時に処理する。

こんな記事も読まれています。

profile

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。

パソコン

javascript

カメラ

ブログ