Javascript UIWebView中的范围矩形

我有一个带有静态文本内容的

UIWebView

，需要获取web视图内容中特定

NSRange

文本的rect

我猜实现这一点的唯一方法是通过javascript，但我不确定从哪里开始。您将如何执行此操作？

如果您的意思是需要对象来获取文本的clientres，则可以使用以下代码执行此操作：

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

如果您的意思是需要对象来获取文本的clientracts，则可以使用以下代码完成：

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

---

这是我提出的解决方案，感谢Anton如何从节点实际获取

ClientRect

。我基本上实现的是一种从纯文本中的一个范围获得开始节点、节点中的开始位置、结束节点和节点中的结束位置的方法

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

函数boundingRectForRange（rangeStart、rangeEnd、node）{
var startNode=null；
var endNode=null；
var startPositionNode=0；
var EndPositionNode=0；
var=0；
var RangeStartComputerd=0；
var childNodes=node.childNodes；
对于（var i=0；i，这是我提出的解决方案，感谢Anton如何从节点实际获取
ClientRect
。我基本上实现的是一种从纯文本中的范围获取到开始节点、节点中的开始位置、结束节点和节点中的结束位置的方法

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

函数boundingRectForRange（rangeStart、rangeEnd、node）{
var startNode=null；
var endNode=null；
var startPositionNode=0；
var EndPositionNode=0；
var=0；
var RangeStartComputerd=0；
var childNodes=node.childNodes；
对于（var i=0；这是有意义的，但问题是内容包含一些div和font标记，而NSRange忽略了这一点，只处理文本。因此，我的问题是如何获得正确的文本节点及其范围，以便其他所有内容都能正常工作？这是有意义的，但问题是内容包含一些div和font标记，而NSRange忽略这些内容，只处理文本。因此，我的问题是如何获得正确的文本节点及其范围，以便其他所有内容都能正常工作？此方法是否以文本或坐标（x，y）返回字符号？我不熟悉JS。我需要在文本中获取字符号。它返回坐标，因为这是问题所要求的。是否有任何方法可以通过UIWebViewJava脚本获取字符位置？我建议您在这方面再问一个问题，因为它与此问题没有直接关系。此方法是否在文本中返回字符号？或者坐标（x，y）？我不熟悉JS。我需要在文本中获取字符号。它返回坐标，因为这是问题所要求的。有没有办法通过UIWebViewJava脚本获取字符位置？我建议您在这方面再问一个问题，因为它与这个问题没有直接关系