循环遍历 div 内的文本节点 [英] Loop through text nodes inside a div

问题描述

我正在尝试进行文本替换，但为此，我需要遍历 div 的文本节点.

I am trying to do a text replace, but to do so, i need to loop through the text nodes of a div.

点击每个 Div，通过 ajax 加载它的适当内容.但随后我需要在其中的任何文本节点内进行文本替换.

Each Div upon clicking, loads via ajax it's appropriate content. But then I need to do text-replacing inside any of the text nodes inside there.

我当前的代码，在加载ajax内容后，会循环遍历整个页面的所有文本节点，因此资源过于密集.

My current code, after loading the ajax content, loops through all text nodes of the whole page, and therefore is too resource intensive.

我一直在寻找几个小时试图找出如何通过 div 循环并获取文本节点...

I have been looking for hours trying to find out how to both loop thru a div, and get the text nodes...

这必须在 firefox、google chrome 和 ie6 中工作.

and this has to work in firefox, google chrome and ie6.

有什么想法或建议吗?

根据要求，代码如下:

function ajaxLoader(url, id) {
    if (document.getElementById) {
        var x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
    }
    if (x) {
        x.onreadystatechange = function () {
            if (x.readyState == 4 && x.status == 200) {
                el = document.getElementById(id);
                el.innerHTML = x.responseText;
            }
        }
        x.open("GET", url, true);
        x.send(null);
    }
    // alert(id);
    CheckTranslate(id);
    // setTimeout('CheckTranslate(this);', 1000);

}

function CheckTranslate(id) {

    // function to get text of a node
    var content = function (node, txt) {
        if (txt) {
            if (node.textContent) {
                node.textContent = txt;
            } else if (node.nodeValue) {
                node.nodeValue = txt;
            }
        } else {
            return node.textContent ? node.textContent : node.nodeValue;
        }
    };
    // recuse div by id content
    $("#"+id).each(function() {
        // assign object handler
        var obj = $(this).html();

        // check how many text nodes there
        var mylen = obj.length;

        if (mylen > 0) {
            // loop thru each text node
        }
    });
    // recurse ajax content
    (function (parent) {
    var childs = parent.childNodes;

    // if there are children to this
    if (childs && childs.length) {

        // loop through each text node
        for (var i = 0, node; node = childs[i]; i++) {

        // text node found, do the replacement          
        if (node.nodeType == 3) { 

            // grab value of current text node
            var value = content(node);

            // grab class name of current text node
            var myclass = $(this).attr("class");

            // grab data property of this node
            var ist = $(this).data('translated');

            // check if this is correct class and has no data property and value is not undefined
            if (typeof(value) != 'undefined' && myclass != 'box_title' && ist != 'yes' && (myclass == 'status_bar' || myclass == '' || myclass == 'box_title_small' || myclass == 'status_bar_select')) {

                // loop thru english array to find matches
                for (var x = 0; x < en_count; x++) {

                    // get current english phrase
                    var from = en_lang[x];

                    // get current other language phrase
                    var to = other_lang[x];

                    if (value.match(from)) {

                        content(node, value.replace(from, to));
                        if ($.browser.msie == 'false') {
                            $(node).data('translated', 'yes');
                        }
                    }
                    // end check value match
                }
            }
        } else {
            arguments.callee(node);
        }
    }
    }
    })(document.body);
}   

有 2 个函数，ajaxLoader，它为 div 加载 ajax 内容，然后是 CheckTranslate，它在加载新内容后进行翻译.

There are 2 functions, ajaxLoader, which loads the ajax content for divs, and then the CheckTranslate, which does translation after the new content is loaded.

问题是函数(父)部分查看所有文本节点，而为了性能，我宁愿只查看 div 内的文本节点.

The problem being is the function(parent) section looks at all text nodes, where for performance, i'd rather only look at text nodes inside the div.

但我就是不知道如何引用那些...

But I just don't get how to refer to those...

这种东西很难弄清楚，jquery的文档也不是很容易学...

It is very hard to figure this kind of stuff out, and jquery's documentation is not really easy to learn...

推荐答案

我确信有更好的方法可以做到这一点，但在普通的 javascript 中，您只需编写一个递归函数:

I'm sure there's a better way to do this, but in plain javascript, you can just write a recursive function:

function ReplaceChildText(node, findText, replaceText) {
    if (node.nodeType == 3) {
        node.innerHTML = node.innerHTML.replace(findText, replaceText);
    } else {
        for (var child in node.childNodes) {
            ReplaceChildText(child, findText, replaceText);
        }
    }
}

你可以这样称呼它:

ReplaceChildText(document.getElementById('divID'),'findText','replacement');

这篇关于循环遍历 div 内的文本节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！