Учитывая смещение в извлеченной комбинированной текстовой строке, как определить содержащий узел и смещение?

Question

Учитывая следующий HTML (только пример):

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

Можно извлечь текст, например, с помощью Функция jQuery text():

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

Теперь, какой самый простой, быстрый и элегантный способ определить, что смещение 10 в извлеченном тексте соответствует смещению 2 текстового узла внутри узла <strong>SOME</strong> в приведенном выше примере? Кроме того, как сделать обратное, то есть определить смещение 10 в извлеченном тексте из объекта <strong> DOM и смещение 2?

Answer 1

Вот начало.Вы можете использовать TreeWalker, чтобы получить довольно элегантное решение.Вы должны реализовать TreeWalker для IE (при условии, что вам нужна поддержка IE).

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

Теперь для обратного ...