JavaScriptとjQueryで要素内のテキストを選択する方法

2024-04-02

JavaScriptとjQueryで要素内のテキストを選択する (マウスによるハイライトと同様)

このページでは、JavaScriptとjQueryを使って、要素内のテキストを選択する方法を解説します。

JavaScript

select() メソッド

HTMLInputElement オブジェクトには、select() メソッドという、テキストを選択するためのメソッドがあります。このメソッドは、要素内のすべてのテキストを選択します。

// テキスト入力要素を取得
const input = document.querySelector('input[type="text"]');

// テキストを選択
input.select();

setSelectionRange() メソッド

// テキストエリア要素を取得
const textarea = document.querySelector('textarea');

// テキストを選択範囲を設定 (開始位置、終了位置)
textarea.setSelectionRange(0, 10);

getSelection() オブジェクト

window オブジェクトには、getSelection() という、現在の選択範囲を取得するためのプロパティがあります。このプロパティを使って、選択されたテキストを取得したり、選択範囲を変更したりすることができます。

// 現在の選択範囲を取得
const selection = window.getSelection();

// 選択されたテキストを取得
const selectedText = selection.toString();

// 選択範囲の先頭位置を取得
const start = selection.anchorOffset;

// 選択範囲の終了位置を取得
const end = selection.focusOffset;

jQueryを使うと、要素内のテキストを選択する処理をより簡単に記述することができます。

.select() メソッド

jQuery オブジェクトには、select() メソッドという、要素内のすべてのテキストを選択するためのメソッドがあります。

// テキスト入力要素を選択
$('input[type="text"]').select();

// テキストエリア要素を選択
$('textarea').select();

.setSelection() メソッド

// テキストエリア要素を選択範囲を設定 (開始位置、終了位置)
$('textarea').setSelection(0, 10);

.getSelection() メソッド

// 現在の選択範囲を取得
const selection = $('textarea').getSelection();

// 選択されたテキストを取得
const selectedText = selection.text();

// 選択範囲の先頭位置を取得
const start = selection.start();

// 選択範囲の終了位置を取得
const end = selection.end();

JavaScriptとjQueryを使って、要素内のテキストを選択する方法を解説しました。これらの方法を参考に、ユーザーにとって使いやすいWebページを作成してください。

JavaScript

// テキスト入力要素を取得
const input = document.querySelector('input[type="text"]');

// テキストを選択
input.select();

// テキストエリア要素を取得
const textarea = document.querySelector('textarea');

// テキストを選択範囲を設定 (開始位置、終了位置)
textarea.setSelectionRange(0, 10);

// 現在の選択範囲を取得
const selection = window.getSelection();

// 選択されたテキストを取得
const selectedText = selection.toString();

// 選択範囲の先頭位置を取得
const start = selection.anchorOffset;

// 選択範囲の終了位置を取得
const end = selection.focusOffset;

jQuery

// テキスト入力要素を選択
$('input[type="text"]').select();

// テキストエリア要素を選択
$('textarea').select();

// テキストエリア要素を選択範囲を設定 (開始位置、終了位置)
$('textarea').setSelection(0, 10);

// 現在の選択範囲を取得
const selection = $('textarea').getSelection();

// 選択されたテキストを取得
const selectedText = selection.text();

// 選択範囲の先頭位置を取得
const start = selection.start();

// 選択範囲の終了位置を取得
const end = selection.end();

使用例

上記のサンプルコードを参考に、以下の例のように要素内のテキストを選択することができます。

テキスト入力要素内のすべてのテキストを選択する
選択されたテキストを取得する
選択範囲の先頭位置と終了位置を取得する

補足

上記のサンプルコードは、基本的な使用方法を示しています。実際の使用例では、必要に応じてコードを修正する必要があります。
JavaScriptとjQueryのバージョンによって、一部の機能やプロパティの使用方法が異なる場合があります。詳細は、各バージョンのドキュメントを参照してください。

要素内のテキストを選択する他の方法

execCommand() メソッド

// テキストエリア要素を取得
const textarea = document.querySelector('textarea');

// テキストを選択
document.execCommand('selectAll', false, null);

// テキストエリア要素内の特定の範囲のテキストを選択
document.execCommand('select', false, '0,10');

ContentEditable 属性

Element オブジェクトには、ContentEditable 属性という、要素を編集可能にする属性があります。この属性を設定すると、ユーザーは要素内のテキストを選択して編集することができます。

<textarea contentEditable="true"></textarea>

マウスイベントを使って、テキストを選択することもできます。例えば、mousedown イベントとmouseup イベントを使って、マウスでドラッグした範囲のテキストを選択することができます。

// テキストエリア要素を取得
const textarea = document.querySelector('textarea');

// マウスダウンイベントを登録
textarea.addEventListener('mousedown', (event) => {
  // マウスボタンが押された位置を保存
  const start = event.clientX;

  // マウスアップイベントを登録
  textarea.addEventListener('mouseup', (event) => {
    // マウスボタンが離れた位置を取得
    const end = event.clientX;

    // 選択範囲を設定
    textarea.setSelectionRange(start, end);
  });
});