「JavaScript」getSelectionメソッドで選択中のテキストを取得する
環境
Windows 10 Home 64bit
Google Chrome 105.0.5195.102
構文
1.document.getSelection()
getSelection() は Document インターフェイスのプロパティで、ユーザーが選択したテキストの範囲、またはキャレットの現在位置を表す Selection オブジェクトを返します。
選択中のテキストの内容を取得します。
2.document.onselectionchange
テキストを選択した際のイベント発生します。
使用例
<!DOCTYPE html>
<html>
<body>
<script>
document.onselectionchange = function() {
// Selection オブジェクトを取得
let txtContent = document.getSelection();
document.getElementById("cft").textContent = txtContent;
}
</script>
<div>study skill become smart</div>
<div id="cft"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<script>
document.onselectionchange = function() {
// Selection オブジェクトを取得
let txtContent = document.getSelection();
document.getElementById("cft").textContent = txtContent;
}
</script>
<div>study skill become smart</div>
<div id="cft"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<script>
document.onselectionchange = function() {
// Selection オブジェクトを取得
let txtContent = document.getSelection();
document.getElementById("cft").textContent = txtContent;
}
</script>
<div>study skill become smart</div>
<div id="cft"></div>
</body>
</html>
実行結果
「smart」を選択すると、div要素「cft」にテキストを表示します。