document.getSelectionの使い方｜選択文字列を取得【JavaScript入門】

ページ上の文字を選び、その文字をJavaScriptで使いたいときは、document.getSelection()を使えます。ただし、このメソッドが返すのは選択文字列そのものではありません。返り値から文字列を取り出す手順を、試せる例と一緒に説明します。

document.getSelection()は何を返す？

document.getSelection()が返すのは、選択範囲を表すSelectionオブジェクトです。選択文字列を使いたい場合は、返り値にtoString()を呼び出して文字列を取り出します。

const selection = document.getSelection();
const selectedText = selection ? selection.toString() : "";

selectionにはSelectionオブジェクトが入り、selectedTextには取り出した文字列が入ります。選択範囲が取得できない場合に備え、2行目では空の文字列を使う形にしています。

Selectionオブジェクトは、選ばれた文字だけでなく選択範囲の情報も持つため、文字列として使うときには取り出す操作が必要です。文字列にすれば、検索語として調べたり、画面に表示したりできます。

未選択時と選択範囲の扱い

ページ上で文字を選んでいないときも、通常はSelectionオブジェクトが返り、その文字列化の結果は空になります。カーソルだけが置かれた状態でも、選択文字列は空です。選択範囲を取得できない状況ではnullが返ることもあるため、コードでは両方を考慮します。

選択範囲の情報には、選択した文字のほか、どこからどこまでを選んだかなどが含まれます。文章の一部だけを選んだ場合も、複数の部分にまたがる場合も、文字列として取り出した結果を確認して使いましょう。

選択した語句で検索するコード例

次の例では、ページ内の文章から文字を選び、ボタンを押すと、その語句が別の文章に含まれているかを表示します。HTMLファイルとして保存してブラウザで開き、文章中の「選択範囲」という語を選んで試してください。

<!doctype html>
<html lang="ja">
<meta charset="utf-8">
<title>選択した語句を検索する例</title>

<p>ページ上の選択範囲から文字を取り出します。</p>
<button id="searchButton">選んだ語句を検索</button>
<p id="result">文章中の「選択範囲」が見つかるか調べます。</p>

<script>
const button = document.getElementById("searchButton");
const result = document.getElementById("result");

button.addEventListener("click", () => {
  const selection = document.getSelection();
  const selectedText = selection ? selection.toString().trim() : "";

  if (selectedText === "") {
    result.textContent = "先にページ上の文字を選んでください。";
    return;
  }

  const targetText = "ページ上の選択範囲から文字を取り出します。";
  const found = targetText.includes(selectedText);

  result.textContent = found
    ? `「${selectedText}」が文章中に見つかりました。`
    : `「${selectedText}」は文章中に見つかりませんでした。`;
});
</script>
</html>

コードの流れは、ページ上の選択範囲を取得し、文字列に変換して、検索対象の文章に含まれるか調べる順です。

コードには、ページの部品を探すgetElementById()、ボタンを押したときの処理を登録するaddEventListener()、文章を取り出すtextContentを使っています。

操作と結果：文章中の「選択範囲」を選んでボタンを押すと、「『選択範囲』が文章中に見つかりました。」と表示されます。文字を選ばずに押すと、先に文字を選ぶよう案内が表示されます。

文字列として扱えないときの原因と直し方

よくある間違いは、Selectionオブジェクトを文字列だと思い込み、文字列用の検索機能を直接呼び出すことです。文字列に対するincludes()をSelectionオブジェクトに使うと、期待した検索にはなりません。

修正前：Selectionオブジェクトに文字列用の検索を行っています。

const selection = document.getSelection();
const found = selection.includes("選択範囲");

修正後：toString()で文字列を取り出してから検索します。

const selection = document.getSelection();
const selectedText = selection ? selection.toString() : "";
const found = selectedText.includes("選択範囲");

結果の見方：選択した文字に「選択範囲」が含まれていれば、foundはtrueになります。何も選んでいない場合は空の文字列を検索するため、先に空文字列かどうかを確かめる処理を入れてください。

検索・コピー・ハイライトに使うときの注意

検索に使う

検索では、選択範囲から文字列を取り出してから、検索先の文章と照らし合わせます。上の例は、選択した語句が決められた文章に含まれるかを調べる小さな例です。Webサイト全体を検索する機能ではありません。

コピーに使う

選択文字列を画面に表示したり、別の処理に渡したりすることはできます。ただし、文字列を取得することと、利用者の端末のクリップボードへコピーすることは別の処理です。コピー機能を追加する場合は、ブラウザの権限や利用条件も別途確認してください。

ハイライトに使う

選択文字列と同じ文字をページ内から探すだけでは、利用者が選んだ場所を正確に目立たせられるとは限りません。同じ語句が何度もある場合や、選択範囲が複数のページ部品にまたがる場合は、別の場所まで対象になる可能性があります。

選択中の範囲を見た目で強調したい場合と、選択文字列と同じ語句をページ内で探して強調したい場合は、目的が異なります。ページの内容を書き換えて強調する実装は、選択範囲やページの動きに影響することがあるため、単純な文字列の置き換えだけで作らないようにしましょう。

仕様を確認するときの資料

document.getSelection()の返り値や選択範囲の扱いは、次の資料で確認できます。実際に使うブラウザでの対応状況は、対象のブラウザと版を決めたうえで確認してください。

• Selection API仕様：Document.getSelection()
• MDN：Document.getSelection()
• MDN：Selection.toString()

JavaScriptの学習を続ける

この機能は、ページの内容をJavaScriptから扱う学習の一部です。ページの仕組みを順番に学ぶ場合は、DOMの学習ガイドから進められます。

• JavaScript ロードマップ｜基礎からDOM・イベント・フォーム操作まで体系的に学ぶガイド
• JavaScript DOMロードマップ｜初心者が最短でページ操作を理解するためのガイド