JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでユーザーが選択したテキストを取得・表示する方法

Webページ上でユーザーがマウスなどでドラッグして選択したテキストの内容を取得したい場合、JavaScriptのwindow.getSelection()メソッドを利用します。このメソッドは現在の選択範囲を表すSelectionオブジェクトを返し、toString()を呼び出すことで選択された文字列をそのまま取り出せます。

以下は、ユーザーが選択したテキストを取得し、ボタンのクリックで画面に表示するサンプルコードです。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result,.sample {
      font-size: 20px;
      font-weight: 500;
      color: rebeccapurple;
   }
</style>
</head>
<body>
<h1>ユーザー選択のテキスト内容を取得する</h1>
<div style="color: green;" class="result">
ここはdivの中にあるテキストです
</div>
<div class="sample"></div>
<button class="Btn">SELECT</button>
<h3>上のボタンをクリックすると、ユーザーが選択したテキストが表示されます</h3>
<script>
   let resEle = document.querySelector(".result");
   let BtnEle = document.querySelector(".Btn");
   let sampleEle = document.querySelector(".sample");
   BtnEle.addEventListener("click", () => {
      sampleEle.innerHTML = window.getSelection().toString();
   });
</script>
</body>
</html>

コードのポイント

  • window.getSelection()：現在のテキスト選択範囲を表すSelectionオブジェクトを取得します。
  • toString()：Selectionオブジェクトから、選択されている文字列だけをプレーンテキストとして取り出します。
  • innerHTMLへの代入：取得した文字列を.sampleクラスの要素に流し込むことで、選択内容を画面に反映しています。

実行結果

上記のコードをブラウザで開くと、次のように表示されます。

JavaScriptでユーザーが選択したテキストを取得・表示する方法

緑色のテキストを一部選択した状態で「SELECT」ボタンをクリックすると、選択されたテキストが下に表示されます。

JavaScriptでユーザーが選択したテキストを取得・表示する方法

このように、window.getSelection()を使えば、選択テキストの取得は数行のコードで実現できます。検索ハイライトや引用機能など、さまざまなUIの実装に応用できる便利なAPIです。

  1. 【JavaScript入門】クライアントのIPアドレスを取得する方法とサンプルコード

    Webアプリケーションを開発していると、サイト訪問者のパブリックIPアドレスを取得したい場面があります。しかし、JavaScriptにはブラウザから直接IPアドレスを取得する標準APIが用意されていないため、外部のIP検索サービスを利用するのが一般的です。 実装の仕組み 本記事では、ipinfo.ioが提供するJSONP形式のAPIを使用して、クライアントのIPアドレスを取得する方法を紹介します。JSONPを利用することで、同一生成元ポリシー（クロスオリジン制約）を回避しながら、別ドメイン上のデータを受け取ることができます。 サンプルコード <!DOCTYPE html> <

  2. JavaScriptで<text>要素の値を変数に抽出する方法

    JavaScriptで要素の値を変数に抽出するにはSVGの<text>要素のテキスト値を変数に抽出したい場合は、textContentプロパティを使用します。基本的な書き方は以下の通りです。document.getElementById(yourTextIdValue).textContentgetElementById()メソッドで対象の要素をIDから取得し、そのtextContentプロパティを参照することで、要素内のテキストを文字列として変数に格納できます。textContentとinnerHTMLの違いなお、SVG要素の場合はinnerHTMLよりもtextContentを