迭代页面中的每个文本元素？ [英] Iterating through each text element in a page?

问题描述

我正在尝试在jQuery中编写一个脚本，它将遍历页面内的每个文本元素。然后我需要逐一改变每个字母的颜色。例如，对于这样的页面：

 < p>一些文本和< a href =http： //example.com\">some link< / a>和< span>其他< / span>< / p> 
  

我想得到：

 一些文本和
一些链接
和
别的东西
  pre> 
 
 
，并能够对每个单独的字母进行风格化（即将我的样式放回到DOM中）。
 
 
 
我知道 text（）方法，但是由于它结合了文本内容，因此我不需要访问每个单独的文本部分。 
 
 
 
任何有关如何做的建议？
解决方案
 
 
 
循环遍历所有子元素，递归递归元素。
 
将所有文本节点存储在列表中。
 
 
循环遍历所有文本节点：
 
 
 
 
循环遍历每个元素的文本内容。 
 
 
 
 
将< span> 元素
 
 
将此元素插入到 DocumentFragment中 
 
 
 
 
 
将文本节点替换为片段。
 
 
 
 
 
 
 
 
演示： http://jsfiddle.net/B2uRn/  
 
 
 
  / jQuery插件，例如：
（function（$）{
 $ .fn.styleTextNodes = function（）{
 return this.each（function（）{
 styleTextNodes ）; 
}）; 
}; 
}）（jQuery）
 
函数styleTextNodes（元素）{
 var span = document.createElement（'跨度'）; 
 span.className ='shiny-letter'; 
 
 //递归地遍历孩子，并在列表中推文本节点
 var text_nodes = []; 
（function recursiveWalk（node）{
 if（node）{
 node = node.firstChild; 
 while（node！= null）{
 if（node。 nodeType == 3）{
 //文本节点，做某事，例如：
 text_nodes.push（node）; 
} else if（node.nodeType == 1）{
 recursiveWalk（node）; 
} 
 node = node.nextSibling; 
} 
} 
}）（element）; 
 
 //旧的IE版本的innerText。元素中的
 var textContent ='textContent' '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）; //从基础创建克隆
 tmp [textContent] = text [j]; //设置字符
 dummy.appendChild（tmp）; // append span 
} 
 node.parentNode.replaceChild（dummy，node）; //替换文本节点
} 
} 
  
 
I'm trying to write a script in jQuery that would iterate through each text element inside a page. Then I need to change the color of each letter one by one. For example, for a page such as this one:
<p>Some text and <a href="http://example.com">some link</a> and <span>something else</span></p>
I would like to get:
"Some text and "
"some link"
" and "
"something else"
and be able to style each individual letter (i.e. put back into the DOM whatever I styled).

I know about the text() method but that won't do the job since it combines the text contents, while I need to access each individual text part. 

Any suggestion on how to do that?
解决方案

Loop through all child elements, recursively for elements.

Store all text nodes in a list.
Loop through all text nodes:


Loop through the textual contents of each element.


Wrap each letter in a <span> element
Insert this element in a DocumentFragment

Replace the text node with this fragment.



Demo: 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
    }
}


                        
这篇关于迭代页面中的每个文本元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！