今ブラウザで範囲選択されている文字列を得る方法

ブラウザに表示されているウェブページ内でユーザが文字列を範囲選択したとき、その選択された文字列自身はJavaScriptで得ることができます。
範囲選択した上で右クリックされたときなどに、「選択された文字列を使って検索するようなサブメニューを表示する」といった独自機能を作りたいときに活用できるかも知れません。(今回のエントリではそこまでは説明していませんが。)

範囲選択されている文字列を得るgetSelectionメソッド

ブラウザ上で範囲選択されている文字列をJavaScriptで得る方法は簡単で、getSelectionメソッドを使うだけです。
以下のように記述すると、「今、範囲選択されている文字列」が変数SelStrに入ります。

var SelStr = document.getSelection();

例えば何文字が範囲選択されているのかは、文字列に変換してから以下のようにlengthプロパティを見ると分かります。

var SelNum = String(document.getSelection()).length;

※注意：

ここで document.getSelection().length と書いてしまうと、選択範囲がどうであろうと undefined になります。getSelectionメソッドはSelectionオブジェクトを返すので、上記のようにStringオブジェクト(文字列)に変換してからlengthプロパティを参照しないと、文字数は得られないようですね。(昔のブラウザだと、getSelectionメソッドは直接文字列を返していたらしく、わざわざ変換しなくてもlengthプロパティを参照できたみたいですが……。)

範囲選択されている文字列の文字数を表示するサンプル

このgetSelectionメソッドを実際に使ったサンプルは以下の通りです。
このページ内に表示されている文字列を適当に範囲選択してからボタンをクリックしてみて下さい。

上記の枠内にもダミーの文字列がありますが、別にその中にある文字を範囲選択した場合しか分からないわけではありません。このページ内のどこにある文字列でも範囲選択してカウント可能です。(^_^;) 例えば、[Ctrl]＋[A]キーを押してページ内の全文字列を範囲選択してからボタンを押せば、たぶん4千文字以上のカウントになるでしょう。

下記のJavaScriptソースにあるように、document.getSelection()ではなく、getElementByIdメソッドなどを使って範囲を限定すれば、その範囲内に限った選択範囲を得ることもできます。
上記のサンプルを作るHTML＋JavaScriptソースは以下の通りです。

function CountSelectedChars() {
   var SelStr = document.getSelection();
   var Msg = "選択中の文字数は、 " + String(SelStr).length + "文字です。";
   document.getElementById('resultArea').innerHTML = Msg;
}

上記で作成したCountSelectedChars関数をボタンクリックで実行できるよう、以下のようにinput要素でボタンを作ります。
また、カウントした文字数の表示領域として、id名に「resultArea」を加えた要素を用意しています。

<input type="button" value="範囲選択されている文字列をカウント" onclick="CountSelectedChars();">
<span id="resultArea">(結果表示領域)</span>

上記のサンプルでは、ボタンをクリックすることで文字数を表示させただけですが、右クリック等をトリガーにして、範囲選択されている文字列をサイト内検索するオプションを作るとか、何かにいろいろ使えそうな気がします。

関連記事：
「テキスト入力欄の文字数をリアルタイム表示する方法」
「ページ内の総リンク個数を得てリンク一覧を出す方法」

(更新日：2017年06月14日)