Using innerHTML.repalce to replace text with img element

Question

I'm writing a script to add extra smileys to the Gmail chat.
Its working partially, i'm stuck with the innerHTML.replace method @line 33

If you see, the regex in the replace method is passed using a variable. This is where the script is choking.
If i replace the variable with the actual regex, it works fine :|

Answer 1

Each timeout closure ends up with the latest value for the two variables, not the value for the current iteration. In the code, there's only one iteration, but I assume that's just simplified for posting. You can change it to something like:

for(var i = smileys.length-1; i >= 0; i--) {
    (function(i)
    {
        var smileyRegex = smileys[i][0];
        var smileySrc = smileys[i][1];
        if(node.textContent.match(smileyRegex)) {
            log('match');
            window.setTimeout(function(){
                log(node.innerHTML); log(node.innerHTML.replace(smileyRegex, '<img class="smiley_ext" src="'+smileySrc+'">'));
            },1000);
        }
    })(i);
}

This way, each iteration step has its own set of variables. However, I'm not sure whether you actually need the timeout.

Answer 2

Instead of

window.setTimeout(function(){
    log(node.innerHTML); 
    log(node.innerHTML.replace(smileyRegex, '<img class="smiley_ext" src="'+smileySrc+'">'));
},1000);

Use

(function(smileyRegex, smileySrc) {
    window.setTimeout(function(){
        log(node.innerHTML); 
        log(node.innerHTML.replace(smileyRegex, '<img class="smiley_ext" src="'+smileySrc+'">'));
    },1000);
})(smileyRegEx, smileySrc);

This is going to create scoped references to the values and so it wont be affected by the loop.