javascript - javascript document.getSelection() を使用して、html で選択したテキストの座標を取得する方法

Question

選択したテキストの上に要素を配置したいと思います。しかし、私は座標を把握することができません。

var sel = document.getSelection();
  if(sel != null) {
    positionDiv();
}

例：（画像）

Answer 1

これが基本的な考え方です。選択範囲の先頭にダミー要素を挿入し、そのダミー html 要素の座標を取得します。次に、それを削除します。

var range = window.getSelection().getRangeAt(0);
var dummy = document.createElement("span");
range.insertNode(dummy);
var box = document.getBoxObjectFor(dummy);
var x = box.x, y = box.y;
dummy.parentNode.removeChild(dummy);