2012/04/10更新

[HTML5] Webページで選択中の文字を取得するSelection API

今日はJavaScriptを利用して、ページでマウスなどで選択中の文字列を取得するサンプルを作成♪(´ε｀ )

実装方法を忘れないように、ブログに残しておきたいと思います。

html5 selection api image

JavaScriptを用いて選択中の文字列を取得する方法

JavaScriptのwindow.getSelection()というメソッドを利用する事で、Webページ上で選択中の文字列を取得出来るようです。簡単(・∀・)

var selObj = window.getSelection();
alert("選択した文字列: " + selObj);

この機能を利用して、選択中の文字を表示する機能と、選択中の文字を赤色にする機能を作ってみました。

http://www.yoheim.net/labo/tips/selection.php

文字列を選択する機能

ページ上の文字列を選択して「選択範囲を表示」ボタンを押す事で、ダイアログに選択した文字列が表示されます。

選択した文字列に色を付ける機能

選択した文字列に赤色をつけてみました。ホントに簡易なものなので、選択範囲によっては動かない場合もありますが、あしからず。

JavaScript実装としてはこんな感じ。

var selObj = window.getSelection();
if (selObj == '') {return false;}
var range = selObj.getRangeAt(0);
var span = document.createElement("span");
span.style.color = "#ff0000";
range.surroundContents(span);

window.getSelectionで取得したオブジェクトから、RangeオブジェクトをgetRangeAt(i)を利用して取得します。Rangeオブジェクトには色々なメソッドがありますが、surroundContentsメソッドを利用して、選択中の文字列をタグで赤色にするSPANタグで囲うようにすることで、文字列を赤色にするようにしています。なお、getSelectionメソッドやRangeオブジェクトについては、以下サイトの解説が分かりやすかったです。

https://developer.mozilla.org/ja/DOM/Selection

https://developer.mozilla.org/ja/DOM/range

最後に

Web上では、色々と出来る事が分かってきました。HTML,CSS,JavaScriptなどあまり詳しくなかったのですが、だんだんと分かってきて楽しい限りです。

今回利用したwindow.getSelection()は、大体の新しいブラウザーでは動作しますが、一部のブラウザー（IE8までなど）では動作しないかもしれません。