Получение смещения символа внутри вложенных HTML-тегов

Question

У меня есть HTML-код, похожий на этот:

<code><pre>
    words words words
    words <span> words mystery words</span>
    words words words

Я хотел бы получить смещение символа «mystery» относительно тега pre , используя Javascript (native или MooTools). Я могу получить его относительно тега span , используя свойство anchorNode, но не могу найти способ получить его относительно тега pre .

Answer 1

Вы можете использовать DOM Range, чтобы сделать это:

function getCharOffsetRelativeTo(container, node, offset) {
    var range = document.createRange();
    range.selectNodeContents(container);
    range.setEnd(node, offset);
    return range.toString().length;
}

Пример:

var sel = window.getSelection();
var pre = document.getElementById("your_pre_id");
var offset = getCharOffsetRelativeTo(pre, sel.anchorNode, sel.anchorOffset);

Предостережения:

• Это будет работать во всех основных браузерах, кроме IE <= 8. Если вам нужно решение для IE, тогда я могу его предоставить. </li>
• Эта функция будет считать символы внутри тегов <script> или <style> и невидимыхэлементы (например, скрытые с помощью CSS display: none).

Answer 2

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