どうすれば.text_bodyで選択した状態のselectionオブジェクトを取得できるでしょうか。よろしくお願いいたします。
IDによる制御
ここでは、ユーザーの選択した文字列を取得するために、window.getSelection()を使用しています。window.getSelection()をそのまま使うとユーザーが選択した箇所であればどこでも取得できてしまうため、特定のdiv
といったように取得箇所を限定したいのであれば、なにかしらの仕組みで特定div
以外の場合は反応しないようにしなければなりません。
クラスではなくIDになってしまいますが、IDだと下記の方法でできました。
参考資料: javascript - How to getSelection() within a specific div? - Stack Overflow の 回答
<html>
<head>
<script>
function hoge(){
if(window.getSelection().baseNode.parentNode.id != "foo") return;
alert(window.getSelection());
}
</script>
</head>
<body>
aaaa
<div id="foo">JavaScrip Ruby PHP</div>
<button type='button' onclick="hoge()">見出し</button>
<div class="result"></div>
</body>
</html>
ちなみに
ちょっと遭遇していないので、どういう現象かわかってないですが
javascript - How to getSelection() within a specific div? - Stack Overflow の 回答
のコメント部にある
You may have to recursively check the parentNode until you reach the body as the contenteditable will create multiple tags in different hierarchy.
@z0mBi3 Good point, since this is just a "highlight once" thing it would work. I'd advise OP to use jQuery's .closest() function. I'll mention that in a edit.
も気にしたほうがいいかもしれません。このコメントを受けて回答にjQueryによる解法が付け加えられています。そのif文
を書き換えた方法は下記のようです。
引用:
if($(window.getSelection().baseNode).closest("#foo").attr("id") != "foo") return;
テキストエリアの場合
特定のテキストエリア(selectionStart
とselectionEnd
が使える要素と言ったほうがいいかもしれない)でよいなら下記の方法もありました。テキストエリアであれば、window.getSelection()を使わないですみます。
javascript - HTML5 how to get selected text out of a textarea - Stack Overflow の 回答
念のためにテキストエリア版で重要そうなところを引用しておきます。
var textarea = document.getElementById("textArea");
var selection = (textarea.value).substring(textarea.selectionStart,textarea.selectionEnd);
alert (selection);
追記: contenteditableの場合
contenteditableですが、質問者さんは、<div class="text_body" contenteditable>
と書かれていますが、true
もしくはfalse
を与える必要があると思います(もしくは私が知らないだけで省略可能?)下記のように textareaと同様にいけるかと思い試してみたが、クロームで試してみたところ駄目でした。
jquery - selectionStart and selectionEnd in contenteditable element - Stack Overflow にcontenteditable
を使った質問がありましたが、getSelection
の回答しか載っておらず、特別によさそうな方法がありませんでした。
駄目だった例:
<html>
<head>
<script>
function hoge(){
var contenteditableAria = document.getElementById("foo");
var selection = (contenteditableAria.value).substring(contenteditableAria.selectionStart,contenteditableAria.selectionEnd);
alert (selection);
}
</script>
</head>
<body>
<div id="foo" contenteditable="true">JavaScrip Ruby PHP</div>
<button type='button' onclick="hoge()">見出し</button>
<div class="result"></div>
</body>
</html>