How can I calculate the height of a text selection without changing the DOM

Question

I am using the Range to manipulate selected text. I would like to calculate the height from where someone started selecting text to where they finished.

I have tried a span to the beginning and end of the selected range and I can accurately calculate the height form that, but it changes the DOM and prevents me form doing some other range manipulations like highlighting previously selected text.

I have also tried collecting the position of the mosedown and mosueup positions but I need an accurate height from the top of the text selected to the bottom of the text where the selection was released and thats not always the case.

So I was wondering if there was a way to calculate the height of a text selection without changing the DOM?

Answer 1

It depends which browsers you need to deal with. Here's a function that will work in IE >= 4 and browsers that support getClientRects() in Range (Firefox >= 4, WebKit since 2009, Opera). If you need support for earlier browsers, you'll need to modify the DOM, which is actually fine so long as you restore the DOM to its previous state.

jsFiddle: http://jsfiddle.net/W84yW/

Code:

function getSelectionHeight() {
    var selHeight = 0;
    if (document.selection && document.selection.type == "Text") {
        var textRange = document.selection.createRange();
        selHeight = textRange.boundingHeight;
    } else if (window.getSelection) {
        var sel = window.getSelection();
        if (sel.rangeCount > 0) {
            var range = sel.getRangeAt(0);
            if (!range.collapsed && range.getClientRects) {
                var startRange = range.cloneRange();
                startRange.collapse(true);
                var selTop = startRange.getClientRects()[0].top;
                startRange.detach();
                var endRange = range.cloneRange();
                endRange.collapse(false);
                selHeight = endRange.getClientRects()[0].bottom - selTop;
                endRange.detach();
            }
        }
    }
    return selHeight;
}