Rect of Range in UIWebView

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?

If you mean that you need Range object to get ClientRects of text it can be done with this code:

var rangeW3C = document.createRange(),
    textNode = document.getElementById('someId').firstChild; // assume that it would be point to a text node with content

rangeW3C.selectNode(textNode);

// if you need rect of all text node
var textNodeRect = rangeW3C.getClientRects(); // array-like object with rects

// if you need rect of some character in text node, for example first character
rangeW3C.setStart(textNode, 0);
rangeW3C.setEnd(textNode, 1);

var firstCharacterRect = rangeW3C.getClientRects()[0];

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