Question

I’ve modify a dom search/replace script, to replace multiple keywords matching on it, by a link, in a document.

It was working great without any <div> or <p>, but with a complex structure the keywords of each node are replaced…

This an example

As you could see, the same keyword is not linked several times in an element, but while there is some other elements the keywords are linked…

This is the script

(function(){
    // don't replace text within these tags
    var skipTags = { 'a': 1, 'style': 1, 'script': 1, 'iframe': 1, 'meta':1, 'title':1, 'img':1, 'h1':1 };
    // find text nodes to apply replFn to
    function findKW( el, term, replFn ) 
    {
        var child, tag;
        if(!found)var found=false;
        for (var i = 0;i<=el.childNodes.length - 1 && !found; i++)
        {
            child = el.childNodes[i];
            if (child.nodeType == 1) 
            { // ELEMENT_NODE
                tag = child.nodeName.toLowerCase();
                if (!(tag in skipTags)) 
                {
                    findKW(child, term, replFn);
                }
            } 
            else if (child.nodeType == 3) 
            { // TEXT_NODE
                found=replaceKW(child, term, replFn);
            }
        }
     };    
    // replace terms in text according to replFn
    function replaceKW( text, term, replFn) 
    {
        var match,
            matches = [],found=false;
        while (match = term.exec(text.data)) 
        {
            matches.push(match);
        }
        for (var i = 0;i<=matches.length - 1 && !found; i++)
        {           
            match = matches[i];            
            // cut out the text node to replace
            text.splitText(match.index);
            text.nextSibling.splitText(match[1].length);
            text.parentNode.replaceChild(replFn(match[1]), text.nextSibling);
            if(matches[i])found=true;// To stop the loop            
        }
        return found;
    };
    // Keywords to replace by a link
    var terms=Array('keywords','words');
    for(kw in terms)
    {
        findKW(
            document.body, 
            new RegExp('\\b(' + terms[kw] + ')\\b', 'gi'),
            function (match) 
            {
              var link = document.createElement('a');
              link.href = 'http://www.okisurf.com/#q=' + terms[kw];
              link.id = '1';
              link.target = '_blank';
              link.innerHTML = match;
              return link;
            }
        );
    }
}());​

Please anyone could help me to stop the loop and replace only the first keyword matching ? (I’m going crazy with those nodes and the var found that I can’t send like global while the threads are working in loop, for the findKW() function…) And without any library (no jQuery or other)

Answer 1

You can return true when you replaced the the word, and test for it to stop the recursion:

if (child.nodeType == 1) { // ELEMENT_NODE
    tag = child.nodeName.toLowerCase();
    if (!(tag in skipTags)) {
        // If `findKW` returns `true`, a replacement as taken place further down
        // the hierarchy and we can stop iterating over the other nodes.
        if (findKW(child, term, replFn)) {
            return true;
        }
    }
} else if (child.nodeType == 3) { // TEXT_NODE
    if (replaceKW(child, term, replFn)) {
        return true;
    }
}

And remove any reference to found in this function, it is not needed.

DEMO (I also updated the replaceKW function, you don’t need to collect all matches if you are only using the first one anyway).