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

JavaScriptで要素内のテキストを選択・選択解除する方法

JavaScriptを使えば、Webページ上の特定の要素内にあるテキストをプログラムから簡単に選択（ハイライト表示）したり、その選択を解除したりできます。この記事では、window.getSelection() が提供するメソッドを活用した実装方法を、実際に動作するサンプルコードとともにわかりやすく解説します。

使用する主なAPI

  • selectAllChildren(element)：指定した要素の子ノードすべて（テキストを含む）を選択状態にします。
  • removeAllRanges()：現在設定されているすべての選択範囲（Range）を削除し、選択を解除します。

サンプルコード

<!DOCTYPE html>
<html lang="en">
<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 {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>Select and Deselect Text Inside an Element</h1>
<div style="color: green;" class="result">
Here is some text inside the div
</div>
<button class="Btn">SELECT</button>
<button class="Btn">DESELECT</button>
<h3>Click on the above button to select/de-select text inside the div</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelectorAll(".Btn");
    BtnEle[0].addEventListener("click", () => {
        window.getSelection().selectAllChildren(resEle);
    });
    BtnEle[1].addEventListener("click", () => {
        window.getSelection().removeAllRanges();
    });
</script>
</body>
</html>

実行結果

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

JavaScriptで要素内のテキストを選択・選択解除する方法

「SELECT」ボタンをクリックした場合：

JavaScriptで要素内のテキストを選択・選択解除する方法

「DESELECT」ボタンをクリックした場合：

JavaScriptで要素内のテキストを選択・選択解除する方法

コードのポイント

各ボタンにはクリックイベントリスナーが登録されています。「SELECT」ボタンが押されると window.getSelection().selectAllChildren(resEle) が実行され、クラス名 result のdiv要素の中身がすべて選択されます。一方、「DESELECT」ボタンが押された際は removeAllRanges() を呼び出すことで、現在の選択範囲が完全に解除されます。

このようにSelection APIを活用することで、マウスやキーボードによるユーザー操作に頼らず、JavaScript側からテキストの選択状態を自由に制御できるようになります。コピー機能の補助や、注釈ツールなどさまざまな場面で応用できる便利なテクニックです。

  1. JavaScriptでテキストボックスを選択することは可能ですか？select()メソッドの使い方を解説

    はい、可能です。JavaScriptのselect()メソッドを使えば、テキストボックス内のテキストを選択状態にすることができます。まずは、テキスト入力欄を作成してみましょう。 テキストボックスとボタンの作成 Enter your Name:<input type="text" id="txtName" value="John"> <br> <button type="button" onclick="check()">Select Text Box<

  2. CSSで要素の最小幅（min-width）と最大幅（max-width）を設定する方法

    CSSでは、min-widthプロパティとmax-widthプロパティを使うことで、要素の幅に下限と上限を設定できます。これにより、ブラウザのウィンドウサイズが変わっても、レイアウトが崩れすぎるのを防ぐことができます。 min-widthは要素の最小幅を指定し、それより狭くならないようにします。max-widthは要素の最大幅を指定し、それ以上広がらないようにします。 コード例 以下のコードでは、div要素に対して最大幅300px、最小幅100pxを設定しています。ブラウザのウィンドウサイズを変更すると、その効果を確認できます。 <!DOCTYPE html> <html&g