jquery - 遍历 div 内的文本节点

Question

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

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

我当前的代码在加载 ajax 内容后循环遍历整个页面的所有文本节点，因此占用资源过多。

我花了好几个小时试图找出如何循环遍历 div 并获取文本节点...

这必须适用于 firefox、google chrome 和 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，在加载新内容后进行翻译。

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

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

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

Answer 1

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

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');