Question

Given the following HTML (just an example):

<div id="container"><span>This is <strong>SOME</strong> great example, <span style="color: #f00">Fred!</span></span></div>

One can extract the text using e.g. jQuery’s text() function:

var text = $('container').text();

Now, what would be the simplest, fastest, most elegant way to determine that the offset 10 in the extracted text corresponds to the offset 2 of the text node inside the <strong>SOME</strong> node in the example above? Also, how would one do the inverse, i.e. determining the offset 10in the extracted text from the <strong>DOM object and the offset 2?

Answer 1

Here is a start. You can use TreeWalker to get a pretty elegant solution. You need to implement TreeWalker for IE (assuming you need IE support) though.

function findOffset(node, initialOffset) {
  var offset = initialOffset;
  var walker = node.ownerDocument.createTreeWalker(node, NodeFilter.SHOW_TEXT);
  while(walker.nextNode()) {
    var text  = walker.currentNode.nodeValue;
    if (text.length > offset) {
      return { node: walker.currentNode.parentNode, offset: offset };
    }
    offset -= text.length;
  }
  return { node: node, offset: initialOffset };
}

demo

Now for the reverse…