JavaScript getSelectionメソッドを使用して選択中のテキストを取得するサンプル
環境
Windows 10 home 64bit
Google Chrome 107.0.5304.122（Official Build） （64 ビット）
構文
1.テキストを選択します
document.getSelection();
2.イベント
document.onselectionchange = function() {処理コード}
selectionchange イベントは Selection API (en-US) の一部で、文書における現在のテキストの選択が変更された際に発生します。
使用例
<!DOCTYPE html>
<html>
<body>
<div>東京</div>
<div id="result"></div>
<script>
/*現在のテキストの選択イベント*/
document.onselectionchange = function(){
let cft= document.getSelection();
/*div要素result内容表示*/
document.getElementById("result").textContent = "welcome" + cft;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<div>東京</div>
<div id="result"></div>
<script>
/*現在のテキストの選択イベント*/
document.onselectionchange = function(){
let cft= document.getSelection();
/*div要素result内容表示*/
document.getElementById("result").textContent = "welcome" + cft;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<div>東京</div>
<div id="result"></div>
<script>
/*現在のテキストの選択イベント*/
document.onselectionchange = function(){
let cft= document.getSelection();
/*div要素result内容表示*/
document.getElementById("result").textContent = "welcome" + cft;
}
</script>
</body>
</html>
実行結果
文字「東京」を選択した際に、div要素「result」に「welcome東京」が表示されます。