Iterate over text nodes inside a div

Question

I am trying to replace text, but for this I need to loop through the text nodes of the div.

Each Div, when clicked, downloads the relevant content through ajax. But then I need to do a text replacement inside any of the text nodes inside.

My current code, after loading ajax content, iterates over all the text nodes of the entire page and is therefore too resource intensive.

I was looking for a clock, trying to figure out how to get around the loop through the div, and get the text nodes ...

and this should 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 ajaxLoader functions that load the ajax contents for a div, and then CheckTranslate, which performs the translation after loading the new content.

, () , 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

By text nodes do you mean words?

You can use splitto separate words into an array:

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

A div like this:

<div>red blue green orange</div>

Output:

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