javascript - range.setStart 仅使用字符偏移量？

Question

我是 Javascript 的新手，最近几天我一直在阅读文档，试图解决这个问题。我终于不得不诉诸于在这里炫耀我的无知。

我有一个整数，它是段落中字符的索引。我想找到这个 Angular 色的边界矩形。我一直在尝试通过制作一个包含该字符的范围来做到这一点。

所以我试过:

var range = document.createRange();
range.setStart (node, offsetInsideNode);

对于节点，我尝试传入段落元素，对于 offsetInsideNode，我尝试传入 characterOffset 整数。

但是后来我发现:“如果节点元素可以有子节点，那么offsetInsideNode参数指定的是子节点在节点元素的childNodes集合中的位置，否则指定的是字符在文本内容中的位置节点元素。”

但我只想使用字符位置。而且我不知道该怎么做，因为它似乎只想使用子节点位置。我猜我遗漏了什么。

假设我有一段:

<p xmlns="http://www.w3.org/1999/xhtml" class="s12" style="color: rgb(0, 0, 0);"><span class="mySpanClass">The</span> quick brown <b>fox</b> jumps over the lazy dog</p>

我想找到第 n 个字符的边界矩形，我该怎么做？我是不是找错了树，我忽略了一种更简单的方法？

谢谢。

注意事项:

• 仅限javascript
• 没有图书馆
• 没有jquery
• 用于 iOS 设备上的 UIWebview

Answer 1

希望这就是您要找的。这个函数基本上获取你想要在其中找到第 n 个元素的内容，将其拆分为字符，找到 nth 而不计算 HTML 标记，将 nth 包装在一个临时范围内，然后在将其替换为原始内容之前读取 offsetTop 和 offsetLeft。然后将偏移量 x 和 y 作为对象返回。

function nthCharOffset(nth, element){
    var orgContent = element.innerHTML;   // Save the original content.
    var arr = orgContent.split('');         // Split every character.

    // Few vars to control the upcoming loop
    var content = '';
    var tag = false;
    var count = 0;

    // Loop through every character creating a new string and wrapping the nth in a temporary span
    for (var i = 0; i < arr.length; i++) {

        // if inside tag, don't count this in the nth count
        if (arr[i] == '<') tag = true
        if (!tag) count++;
        if (arr[i] == '>') tag = false;

        // If this charactar is nth, wrap it in a temporary span
        if (nth == count) content += '<span id="offset-check">' + arr[i] + '</span>';
        else content += arr[i];
    }

    // Set the content with the temporary span.
    element.innerHTML = content;

    // Get the offset of the temporary span.
    var offsetCheck = document.getElementById('offset-check');
    var offset = {x: offsetCheck.offsetLeft , y: offsetCheck.offsetTop }

    // Remove the span.
    element.innerHTML = orgContent;

    // Return the result.
    return offset;
}

像这样使用它:

nthCharOffset(10, document.getElementById('element'));

我做了一个 fiddle ，你可以测试一下 here .

This fiddle使用该函数将红色矩形定位和缩放到 nth 字符。