如何獲取HTML元素的開始和結束字符索引？

試圖找出如何使用JavaScript在整個HTML文檔中獲取受元素影響的字符範圍。 我只需要webkit兼容代碼。如何獲取HTML元素的開始和結束字符索引？

我在想我只是沒有尋找合適的條款？

這裏是什麼，我將要使用的例子：

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

如果我得到了類高亮一個參考跨度... 我想知道的開始和結束索引亮點跨度包含的字符，包括子跨度中的文本，但當然，不是元素聲明本身的一部分的字符，例如「<」，「>」或它們之間的任何內容。

來源

2013-01-21 Resist Design

你說的是什麼意思你想在這裏完成什麼？無論如何，這聽起來不像是正確的方法。 –

這是不平凡的，但我認爲你想要構建一個深度優先遍歷文本節點，然後從中找出它。當然，這不會考慮CSS對某些特定文本元素的* apparent *索引的影響。 – Pointy

@Pointy：您可以使用Range來避免該方法的複雜性，但您的警告仍然適用。 –

一個簡單的方法是使用DOM Range。這種方法並不完美：偏移將包括空白文本節點，腳本元素中的文本節點以及被CSS隱藏的元素中的文本，並且不會包含塊元素和元素隱含的換行符，但可能足以滿足您的要求要求。

演示：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 
    }; 
}

來源

2013-01-21 15:30:35

BINGO！謝謝！：D我想確保這不會改變選擇，它不會！你可以在這裏看到：http://jsfiddle.net/QhNZ6/4/ –

-1

如果你只是想抓住該文本：「開始和結束指數」

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

來源

2013-01-21 15:36:28

如何獲取HTML元素的開始和結束字符索引？

回答

相關問題