【javascript】マウスで選択した文字列の取得 getSelection

やりたいこと
以下のようにマウスで選択した文字列を取得し、 textareaに書き出す方法について紹介します。
マウスで選択した文字列の取得
2行目 : document.getSelection(); で、Selectionを取得。
3行目 : document. getSelection().toString(); で、マウスで選択した文字列を取得できます。
7行目 : マウスを話した時(mouseup)にイベントを処理します。
このページ上で、マウスを文字列で選択し、コンソールを確認してみてください。
const getSelected = function () {
let selection = document.getSelection();
console.log(selection);
console.log(selection.toString());
};
document.addEventListener("mouseup", getSelected);
選択した文字列をtextareaに書き出す
1行目 : textareaを取得
5行目 : textarea.textContentに document.getSelection()を指定すれば、選択した文字列が反映されます。 ここではtoString()にしなくても大丈夫です。
const textarea = document.querySelector("textarea");
const getSelected = function () {
let selected = document.getSelection();
textarea.textContent += selected;
};
参考


まとめ
以上、選択範囲の文字列を取得する方法を紹介しました。 意外と簡単に、数行のjavascriptで取得できるんですね~。
- document.getSelection()でSlectionを取得
- document.getSelection().toString()で選択範囲の文字列を取得
- textarea.textContent = document.getSelection() でテキストエリアに書き出すことができる。
こんな記事も読まれています。
-
【HTML】【CSS】【javascript】電卓の作り方
電卓のソースコードを2つ紹介します。javascriptはわずか数行で書けます。
-
【JacvaScript】【CSS】たった4行のJavaScriptでできるハンバーガーメニューの作り方
たった4行のJavaScriptで作るハンバーガーメニューの作り方について紹介します。✖をつくるには、transform-originがポイントです。
- リンク
-
波紋エフェクトを表現するjqueryのripples-min.jsの使い方
jqueryのripples-min.jsを使うと簡単に水面の波紋を表現できます。波紋の広がりの速度、波紋の大きさ、波紋のブレの値を変えていろいろ表現させると面白いです。
-
【Javascript】querySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法。
JavascriptのquerySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法について解説します。querySelectorと同じように書いてしまうとエラーがでます。forEachを使うとすべてに適用できます。
- リンク
-
要素の高さを取得する方法。getBoundingClientRectとは?window.innerHeightとは?window.pageYOffsetとは?
要素の高さを取得する方法について解説します。getBoundingClientRect、window.innerHeight、window.pageYOffsetについて理解し、要素がいつ画面に現れるかを把握できるようにしましょう。
-
Javascriptを使ったページネーションの実装
トップページの記事が増えてきたので、何とかページネーションで最新の記事だけを表示できないかと思っていたら、いい記事を発見しました。カスタマイズして実装することができました。
- リンク
-
【Javascript】マウスの指す(X, Y)座標とドラッグ & ドロップを理解する
マウスの指す(X, Y)座標とドラッグ & ドロップについて解説します。mousedown, mouseover, mousemove, mouseupを使います。
-
【javascript】連想配列をテーブルできれいに表示する方法
javascript(Object.entries)を使って、連想配列の中身をテーブルできれいに表示する方法について紹介します。
- リンク