Question

尝试弄清楚如何使用JavaScript获取整个HTML文档中元素影响的字符范围。 我只需要与webkit兼容的代码。

我在想我只是没有找到合适的条款？

以下是我将要使用的示例：

<body>
This is the way we 
<span class="highlight"><img src="image.png" />
search the <span class="heavy">text</span>
</span>, 
search the text, search the text, 
early in the morning!
</body>

如果我通过课程突出显示对范围的引用... 我想知道高亮区域包含的字符的开始和结束索引，包括它的子跨度中的文本，当然，不是元素声明本身的字符，例如“＆lt;”， “＆gt;” 中或者他们之间的任何事情。

Answer 1

一种简单的方法是使用DOM Range。这种方法并不完美：偏移将包括空格文本节点，脚本元素中的文本节点和CSS隐藏的元素中的文本，并且不包括块元素和<br>元素隐含的换行符，但可能是足以满足您的要求。

演示：http://jsfiddle.net/timdown/QhNZ6/

代码：

function getOffsetWithinBodyText(node) {
    var range = document.createRange();
    range.selectNodeContents(document.body);
    range.setEndBefore(node);
    var start = range.toString().length;

    return {
        start: start,
        end: start + node.textContent.length
    };
}

Answer 2

如果您只想抓取该文字：

document.querySelectorAll(".highlight")[0].innerText

如何获取HTML元素的开始和结束字符索引？

2 个答案: