範囲選択した文字列を修飾する

マウスで範囲選択した箇所の文字サイズを変えたり、背景色を変えて強調するなどを、javascriptでやる方法。

//実用には、以下のスクリプトをEventListenerに登録して、何かしらのイベント時に動くようにする必要がある。
// 選択範囲の背景を青くする
function blinkBlue(){
  var sel = window.getSelection();
  if(!sel.rangeCount) return; //範囲選択されている箇所がない場合は何もせず終了

  var range = sel.getRangeAt(0);
  var newNode = document.createElement('span');
  newNode.setAttribute('style', 'background-color: blue;'); //範囲選択箇所の背景を青にする
  newNode.innerHTML = sel.toString();
  range.deleteContents();    // 範囲選択箇所を一旦削除
  range.insertNode(newNode); // 範囲選択箇所の先頭から、修飾したspanを挿入
}

//実用にはEventListenerに登録して、何かしらのイベント時に動くようにする必要がある。
//以下では、仮に何かしらのキーが押された時に動くようにした。
window.addEventListener('keydown', blinkBlue)

上記の例では、ブラウザ上で範囲選択した文字列を修飾しています。
適用範囲を絞りたければ

var sel = window.getEelementByID('hoge').getSelection();

みたいにすればよさそう。

もっとバリバリ範囲修正したいなら、ContentEditable属性を使うのが簡単です。

<div contenteditable="true">
contenteditable="true"で囲まれたなかの文字列をCtrl-bで太字にしたり色々できる。
javascriptでcontenteditableを操作すれば、編集ON/OFFが切り替えられる。
</div>

Ref.

• MDN
  • selection ... ユーザーが選択した 1つないし複数のrange
  • range ... documentの断片を表すオブジェクト
  • Content Editable ... Nodeを編集可能にする属性
• Qiita
  • たった一行でブラウザをメモ帳に変える不思議なコード / @KENJU ... Content Editableの面白い使い方