【javascript】getRangeAt()を使って、選択したテキストにCSSをあててハイライトさせる
やりたいこと
前回は、マウスで選択した文字列をテキストエリアに書き出す方法について紹介しました。
【javascript】マウスで選択した文字列の取得 getSelection
今回は、以下のようにマウスで選択した文字列に、 ハイライトを追加する方法について紹介します。
参考
【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%);
}参考
CSS 蛍光ペンで文字を強調する方法
まとめ
以上、選択範囲の文字列にハイライトを追加する方法を紹介しました。
- getRangeAt(0)で選択した範囲を取得
- createElementで、spanを生成。クラスを追加し、選択範囲の文字列を挿入。
- deleteContents()で、選択範囲をいったんすべて削除。
- insertNode()で、削除した部分に生成したspanを挿入。
- マウスアップ(mouseup)した時に処理する。
