循环遍历 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

寻找这样的东西？

$(".your_ajax_div_class").each(function(i){});

您可能会在您的 ajaxComplete() 函数中附加或嵌套这个或类似的东西，以便在内容加载后触发。

Answer 2

我确信有更好的方法可以做到这一点，但是在普通的 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');

Answer 3

文本节点是指单词吗？

您可以使用split 将单词分隔成一个数组：

var str = $("div").text().split(' ');

这样的 div：

<div>red blue green orange</div>

会输出：

["red", "blue", "green", "orange"]