Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:46.

範囲選択されている文字列を得る

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

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

var SelStr = document.getSelection();

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

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

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

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

いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせすん。
あいうえお かきくけこ さしすせそ たちつてと なにぬねの はひふへほ まみむめも やゆよ らりるれろ わゐうゑを ん。


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

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど