Get a range’s start and end offset’s relative to its parent container

by

UPDATE

As pointed out in the comments, my original answer (below) only returns the end of the selection or the caret position. It’s fairly easy to adapt the code to return a start and an end offset; here’s an example that does so:

function getSelectionCharacterOffsetWithin(element) {
    var start = 0;
    var end = 0;
    var doc = element.ownerDocument || element.document;
    var win = doc.defaultView || doc.parentWindow;
    var sel;
    if (typeof win.getSelection != "undefined") {
        sel = win.getSelection();
        if (sel.rangeCount > 0) {
            var range = win.getSelection().getRangeAt(0);
            var preCaretRange = range.cloneRange();
            preCaretRange.selectNodeContents(element);
            preCaretRange.setEnd(range.startContainer, range.startOffset);
            start = preCaretRange.toString().length;
            preCaretRange.setEnd(range.endContainer, range.endOffset);
            end = preCaretRange.toString().length;
        }
    } else if ( (sel = doc.selection) && sel.type != "Control") {
        var textRange = sel.createRange();
        var preCaretTextRange = doc.body.createTextRange();
        preCaretTextRange.moveToElementText(element);
        preCaretTextRange.setEndPoint("EndToStart", textRange);
        start = preCaretTextRange.text.length;
        preCaretTextRange.setEndPoint("EndToEnd", textRange);
        end = preCaretTextRange.text.length;
    }
    return { start: start, end: end };
}

function reportSelection() {
  var selOffsets = getSelectionCharacterOffsetWithin( document.getElementById("editor") );
  document.getElementById("selectionLog").innerHTML = "Selection offsets: " + selOffsets.start + ", " + selOffsets.end;
}

window.onload = function() {
  document.addEventListener("selectionchange", reportSelection, false);
  document.addEventListener("mouseup", reportSelection, false);
  document.addEventListener("mousedown", reportSelection, false);
  document.addEventListener("keyup", reportSelection, false);
};
#editor {
  padding: 5px;
  border: solid green 1px;
}
Select something in the content below:

<div id="editor" contenteditable="true">A <i>wombat</i> is a marsupial native to <b>Australia</b></div>
<div id="selectionLog"></div>

Here’s a function that will get the character offset of the caret within the specified element; however, this is a naive implementation that will almost certainly have inconsistencies with line breaks, and makes no attempt to deal with text hidden via CSS (I suspect IE will correctly ignore such text while other browsers will not). To handle all this stuff properly would be tricky. I’ve now attempted it for my Rangy library.

Live example: http://jsfiddle.net/TjXEG/900/

function getCaretCharacterOffsetWithin(element) {
    var caretOffset = 0;
    var doc = element.ownerDocument || element.document;
    var win = doc.defaultView || doc.parentWindow;
    var sel;
    if (typeof win.getSelection != "undefined") {
        sel = win.getSelection();
        if (sel.rangeCount > 0) {
            var range = win.getSelection().getRangeAt(0);
            var preCaretRange = range.cloneRange();
            preCaretRange.selectNodeContents(element);
            preCaretRange.setEnd(range.endContainer, range.endOffset);
            caretOffset = preCaretRange.toString().length;
        }
    } else if ( (sel = doc.selection) && sel.type != "Control") {
        var textRange = sel.createRange();
        var preCaretTextRange = doc.body.createTextRange();
        preCaretTextRange.moveToElementText(element);
        preCaretTextRange.setEndPoint("EndToEnd", textRange);
        caretOffset = preCaretTextRange.text.length;
    }
    return caretOffset;
}

More Related Contents:

  1. Highlight text range using JavaScript
  2. Javascript: Move caret to last character
  3. How to remove all duplicates from an array of objects?
  4. Access object child properties using a dot notation string [duplicate]
  5. How do I change the background color with JavaScript?
  6. Bootstrap modal appearing under background
  7. How might I find the largest number contained in a JavaScript array?
  8. JavaScript function declaration and evaluation order
  9. How to sort array inside collection record in MongoDB?
  10. Removing all script tags from html with JS Regular Expression
  11. Javascript read file without using input
  12. Invariant Violation: _registerComponent(…): Target container is not a DOM element
  13. Incorrect result in JavaScript calculation [duplicate]
  14. How to get size of an element/list in Firebase without get it all?
  15. How to insert variables in JavaScript strings?
  16. Automatically created variables from ids in JS? [duplicate]
  17. Will async/await block a thread node.js
  18. How do I change the value of a global variable inside of a function
  19. putting html inside an iframe (using javascript)
  20. When should I use brackets with imports
  21. Every Object is a function and every function is Object – Which is Correct?
  22. Checking password match while typing
  23. What algorithm does Readability use for extracting text from URLs?
  24. Why is pop faster than shift?
  25. How do you swap DIVs on mouseover (jQuery)?
  26. how to update time regularly?
  27. Validate phone number using angular js
  28. Setting custom request header on a page redirect
  29. getting last page URL from history object – cross browser?
  30. Cross-domain XMLHttpRequest using background pages

Leave a Comment