Coordinates of Selected Text in Browser Page

var outline = document.getElementById('selection_outline');var start_container = document.getElementById('start_container');var end_container = document.getElementById('end_container');var start_offset = document.getElementById('start_offset');var end_offset = document.getElementById('end_offset');
document.addEventListener('selectionchange', function() {  var selection = document.getSelection();  if (selection) {    var range = selection.getRangeAt(0);    if (range) {      var bounds = range.getBoundingClientRect();      outline.style.top = `${bounds.top + window.scrollY}px`;      outline.style.left = `${bounds.left + window.scrollX}px`;      outline.style.width = `${bounds.width}px`;      outline.style.height = `${bounds.height}px`;            start_container.value = range.startContainer.tagName || range.startContainer.parentNode.tagName;      end_container.value = range.endContainer.tagName || range.endContainer.parentNode.tagName;            start_offset.value = range.startOffset;      end_offset.value = range.endOffset;    }  }})

#selection_outline {  position: absolute;  border: 2px solid red;  pointer-events: none;}
.flow-wrap-row {  display: flex;  flex-direction: row;  flex-wrap: wrap;}
.flow-wrap-row > * {  white-space: nowrap}
.flow-wrap-row > li {  margin-right: 1.5em;}
ul { padding-left: 1.5em;}
input { width: 80px;}

<p>This is <b>a complex element</b> with lots of selectable text <i>and nested, <b> and double nested</b> elements</i>!!!</p><textarea cols="60" rows="5">Here is a text area with some simple content.</textarea><div contenteditable="true">Here is a contenteditable div with some simple content.</div><ul class="flow-wrap-row">  <li><label>startContainer: <input id="start_container" type="text" /></label></li>  <li><label>endContainer: <input id="end_container" type="text" /></label></li>  <li><label>startOffset: <input id="start_offset" type="text" /></label></li>  <li><label>endOffset: <input id="end_offset" type="text" /></label></li></ul><div id="selection_outline"></div>

how do I get co-ordinates of selected text in an html using javascript document.getSelecttion()

Here is the basic idea. You insert dummy element in the beginning of the selection and get the coordinates of that dummy html element. Then you remove it.

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);

Get selected text position and place an element next to it

You could position a marker span at the end of the selection, get its coordinates using jQuery, place your button at those coordinates and remove the marker span.

The following should get you started:

var markSelection = (function() {
    var markerTextChar = "\ufeff";
    var markerTextCharEntity = "";

    var markerEl, markerId = "sel_" + new Date().getTime() + "_" + Math.random().toString().substr(2);

    var selectionEl;

    return function(win) {
        win = win || window;
        var doc = win.document;
        var sel, range;
        // Branch for IE <= 8 
        if (doc.selection && doc.selection.createRange) {
            // Clone the TextRange and collapse
            range = doc.selection.createRange().duplicate();
            range.collapse(false);

            // Create the marker element containing a single invisible character by creating literal HTML and insert it
            range.pasteHTML('<span id="' + markerId + '" style="position: relative;">' + markerTextCharEntity + '</span>');
            markerEl = doc.getElementById(markerId);
        } else if (win.getSelection) {
            sel = win.getSelection();
            range = sel.getRangeAt(0).cloneRange();
            range.collapse(false);

            // Create the marker element containing a single invisible character using DOM methods and insert it
            markerEl = doc.createElement("span");
            markerEl.id = markerId;
            markerEl.appendChild( doc.createTextNode(markerTextChar) );
            range.insertNode(markerEl);
        }

        if (markerEl) {
            // Lazily create element to be placed next to the selection
            if (!selectionEl) {
                selectionEl = doc.createElement("div");
                selectionEl.style.border = "solid darkblue 1px";
                selectionEl.style.backgroundColor = "lightgoldenrodyellow";
                selectionEl.innerHTML = "<- selection";
                selectionEl.style.position = "absolute";

                doc.body.appendChild(selectionEl);
            }

            // Find markerEl position http://www.quirksmode.org/js/findpos.html
        var obj = markerEl;
        var left = 0, top = 0;
        do {
            left += obj.offsetLeft;
            top += obj.offsetTop;
        } while (obj = obj.offsetParent);

            // Move the button into place.
            // Substitute your jQuery stuff in here
            selectionEl.style.left = left + "px";
            selectionEl.style.top = top + "px";

            markerEl.parentNode.removeChild(markerEl);
        }
    };
})();

Related Topics