Question

I have a UIWebView with static textual content and need to get the rect of a certain NSRange of text in the web view’s content.

I’m guessing the only way to go about this is through javascript but I’m not sure where to start. How would you go about doing this?

Answer 1

Here’s the solution I’ve come up with, thanks to Anton for how to actually get the ClientRect from the node. What I’ve basically implemented is a way to get from a range in the plain text to get to a start node, start position in the node, end node and end position in the node.

function boundingRectForRange(rangeStart, rangeEnd, node) {
    var startNode = null;
    var endNode = null;
    var startPositionInNode = 0;
    var endPositionInNode = 0;

    var elapsed = 0;
    var rangeStartComputed = 0;

    var childNodes = node.childNodes;

    for (var i=0;i<childNodes.length;i++) {
        var item = childNodes[i];

        var textContent = item.textContent; 
        var length = textContent.length;
        var newElapsed = elapsed + length;

        if (rangeStart <= newElapsed && rangeStartComputed == 0) {
            startNode = item;
            startPositionInNode = rangeStart - elapsed; 
            rangeStartComputed = 1;
        }

        if (rangeEnd <= newElapsed && rangeStartComputed == 1) {
            endNode = item;
            endPositionInNode = rangeEnd - elapsed; 
            break;
        } 

        elapsed = newElapsed;
    }

    if (startNode == null || endNode == null) {     
        return false;
    }

    if (startNode.toString() != '[object Text]') {
        startNode = startNode.childNodes[0];
    }

    if (endNode.toString() != '[object Text]') {
        endNode = endNode.childNodes[0];
    }

    // Got every sorted let's get these co-ordinates
    var range = document.createRange();
    range.setStart(startNode, startPositionInNode);
    range.setEnd(endNode, endPositionInNode);

    var rects = range.getClientRects(); // Array of rects
    var firstRect = rects[0];

    var x = firstRect.left;
    var width = firstRect.right - x;

    var height = firstRect.bottom - firstRect.top;
    var y = firstRect.top;          

    var retVal = '{{'+x+','+y+'},{'+width+','+height+'}}';

    return retVal;
}