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