Loop through text nodes inside a div

Question

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

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.

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

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

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

Any thoughts or suggestions?

As Requested, here is the code:

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

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.

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...

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

Answer 1

Looking for something like this?

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

You could probably append or nest this or something similar inside your ajaxComplete() function to trigger once the content has loaded.

Answer 2

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

You can call it like this:

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