1. ホーム
2. パソコン
3. javascript

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

投稿日 : 2022年12月25日 更新日 :

やりたいこと

参考

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

getRangeAt()とは？

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

参考

SYNSER Selection.getRangeAt()

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

javascript

展開

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

.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 蛍光ペンで文字を強調する方法

まとめ