Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

マウスで範囲選択した箇所の文字サイズを変えたり、背景色を変えて強調するなどを、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.

umanoda
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away