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

有两个函数，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');

Answer 2

寻找这样的东西？

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

您可以在ajaxComplete()函数中追加或嵌套此类似内容，以便在内容加载后触发。

Answer 3

通过文字节点，你的意思是单词吗？

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

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

像这样的div：

<div>red blue green orange</div>

输出：

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

循环遍历div中的文本节点

3 个答案: