にしし ふぁくとりー(西村文宏 個人サイト)

"JavaScript Tips Factory" : Presented by Nishishi. Since 1997.

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

ブラウザに表示されているウェブページ内でユーザが文字列を範囲選択したとき、その選択された文字列はJavaScriptで得られます。方法は簡単で、getSelectionメソッドを使うだけです。閲覧者が選択した文字列を使って何かを検索するなどの独自機能を作る際などに活用できそうです。

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

ブラウザに表示されているウェブページ内でユーザが文字列を範囲選択したとき、その選択された文字列自身は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ソースは以下の通りです。

JavaScriptソース

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

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

HTMLソース

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

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

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

()

JavaScript TIPSふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報など

▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)

--- 当サイト内を検索 ---