Итерация по каждому текстовому элементу на странице?

Question

Я пытаюсь написать скрипт в jQuery, который будет перебирать каждый текстовый элемент на странице. Затем мне нужно изменить цвет каждой буквы по одной. Например, для такой страницы:

<p>Some text and <a href="http://example.com">some link</a> and <span>something else</span></p>

Хотелось бы получить:

"Some text and "
"some link"
" and "
"something else"

и иметь возможность стилизовать каждую отдельную букву (т. Е. Положить обратно в DOM то, что я написал).

Я знаю о методе text(), но он не сработает, поскольку он объединяет текстовое содержимое, в то время как мне нужен доступ к каждой отдельной текстовой части.

Есть предложения о том, как это сделать?

Answer 1

1. Перебрать все дочерние элементы, рекурсивно для элементов.
   Сохранить все текстовые узлы в списке.
2. Цикл по всем текстовым узлам:
   1. Переберите текстовое содержимое каждого элемента.
      1. Обернуть каждую букву в элемент <span>
      2. Вставьте этот элемент в DocumentFragment
   2. Заменить текстовый узел этим фрагментом.

Демо: http://jsfiddle.net/B2uRn/

// jQuery plugin, example:
(function($) {
    $.fn.styleTextNodes = function() {
        return this.each(function() {
            styleTextNodes(this);
        });
    };
})(jQuery)

function styleTextNodes(element) {
    var span = document.createElement('span');
    span.className = 'shiny-letter';

    // Recursively walk through the childs, and push text nodes in the list
    var text_nodes = [];
    (function recursiveWalk(node) {
        if (node) {
            node = node.firstChild;
            while (node != null) {
                if (node.nodeType == 3) {
                    // Text node, do something, eg:
                    text_nodes.push(node);
                } else if (node.nodeType == 1) {
                    recursiveWalk(node);
                }
                node = node.nextSibling;
            }
        }
    })(element);

    // innerText for old IE versions.
    var textContent = 'textContent' in element ? 'textContent' : 'innerText';
    for (var i=text_nodes.length-1; i>=0; i--) {
        var dummy = document.createDocumentFragment()
          , node = text_nodes[i]
          , text = node[textContent], tmp;
        for (var j=0; j<text.length; j++) {
            tmp = span.cloneNode(true); // Create clone from base
            tmp[textContent] = text[j]; // Set character
            dummy.appendChild(tmp);     // append span.
        }
        node.parentNode.replaceChild(dummy, node); // Replace text node
    }
}