javascript - 使用 innerHTML.repalce 将文本替换为 img 元素

Question

我正在编写一个脚本来为 Gmail 聊天添加额外的笑脸。
它部分工作，我坚持使用innerHTML.replace 方法@line 33

如果您看到，replace 方法中的正则表达式是使用变量传递的。这就是脚本令人窒息的地方。
如果我用实际的正则表达式替换变量，它工作正常：|

Answer 1

每个超时闭包都以两个变量的最新值结束，而不是当前迭代的值。在代码中，只有一次迭代，但我认为这只是为了发布而简化。您可以将其更改为：

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

这样，每个迭代步骤都有自己的一组变量。但是，我不确定您是否真的需要超时。

Answer 2

代替

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

采用

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

这将创建对值的范围引用，因此它不会受到循环的影响。