Javascriptで選択範囲の文字列・DOMを取得、操作する方法

Javascript で選択中の文字列を取得する

• window.getSelection – Web API インターフェイス | MDN

ブラウザ上のコンテンツを選択状態にし、選択された文字列部分を取得するには、window.getSelection 関数を使います。

window.getSelection 関数は選択範囲を Selection オブジェクトとしてを取得します。Selection オブジェクトを toString で文字列にしてやると、選択範囲の文字列を取得できます。

const selectedText = window.getSelection().toString();
console.log(selectedText);

複数のDOMにまたがっていようと、選択された文字列のみを取得してくれます。

選択されているDOMを取得する

• selection – Web API インターフェイス | MDN

選択範囲のDOMを取得するには文字列ではなく、Selection オブジェクトとして取得して使います。

Selection オブジェクトは選択範囲の情報を保持しています。getRangeAt 関数で1つの選択範囲情報を取り出せます。何番目の選択範囲かを引数で指定します。複数の選択範囲は、例えば Ctrl を押しながら複数選択が可能だったりする場合に考慮します。

指定範囲の中にあるコンテンツを cloneContents 関数で DocumentFragment にコピーして取得します。

あとは取得した DOM を好きなように操作すればよいでしょう。以下の例では選択範囲に含まれる a タグのURLを取得し、列挙しています。

// 選択範囲のオブジェクト取得
const selection = window.getSelection();

// 1つ目の選択範囲のDOMをDocumentFragmentにコピー
const dom = selection.getRangeAt(0).cloneContents();

// aタグからURLを取得して列挙
const links = dom.querySelectorAll('a');
for (const link of links) {
    console.log(link.getAttribute('href'));
}

選択されている手文字列の選択状態を解除する

Selection オブジェクトの removeAllRanges 関数を使うことで選択されている状態を解除することができます。

window.getSelection().removeAllRanges();

以上、簡単な選択範囲の操作でした。

参考URL

• window.getSelection – Web API インターフェイス | MDN
• selection – Web API インターフェイス | MDN
  range – Web API インターフェイス | MDN