如何使用JavaScript的replace()函数替换多个单词？

Question

这是我的代码：

        var keys = keyword.split(' ');
        //alert(keys);
        for(var i=0; i<keys.length; i++)
            {
            var re = new RegExp(keys[i], "gi");
            var NewString = oldvar.replace(re, '<span style="background-color:#FFFF00">'+keys[i]+'</span>');
            document.getElementById("wordlist").innerHTML=NewString;
            alert(keys[i]);
            }

但是，如果我输入一个字符串"a b"，它会被分成两个字母"a"和"b"。这个替换函数只会替换"a"，但当它遇到"b"时，它会覆盖并只替换"b"。但我想同时突出显示"a"和"b"。如何解决这个问题？我还有另一个问题。如果我替换/突出显示它，那么它会替换所有HTML标记中的"a"和"b"。所以，如何防止替换这些HTML标记，但在显示整个文本时需要所有HTML标记。

- Moumita

Answer 1

    var keys = keyword.split(' ');
    //alert(keys);
    for(var i=0; i<keys.length; i++)
        {
        var re = new RegExp(keys[i], "gi");
        oldvar = oldvar.replace(re, '<span style="background-color:#FFFF00">'+keys[i]+'</span>');
        document.getElementById("wordlist").innerHTML=oldvar;
        alert(keys[i]);
        }

编辑： 显然，在循环期间，oldvar没有被改变，总是只应用最后一个替换。你必须更改“oldvar”才能替换所有单词。

- Ivan

Answer 2

您可以使用单个正则表达式替换来实现此操作：

var re = new RegExp(keys.join("|"), "gi");
oldvar = oldvar.replace(re, replacer);        
document.getElementById("wordlist").innerHTML = oldvar;

function replacer(str)  
{  
    return '<span style="background-color:#FFFF00">' + str + '</span>';
}  

示例 - http://jsfiddle.net/zEXrq/1/

这段代码的作用是将所有键合并成一个由|分隔的正则表达式，该表达式将匹配所有单词，然后在匹配项上运行替换函数。

示例2 - http://jsfiddle.net/zEXrq/2/

- Richard Dalton

---

如果这个键是动态的，那么这段代码就无法工作。它仍然会替换HTML标签。我想防止替换HTML标签。请帮忙解决这个问题。 - Moumita

我做了这个：http://jsfiddle.net/zEXrq/3/ 在这里，我的字符串包含一些HTML内容。我想用这些HTML内容来显示它。但是我只想替换那些HTML标签中的文本。我该怎么办？ - Moumita

请查看我的问题：http://jsfiddle.net/zEXrq/7/ 我不想突出显示任何HTML标签。 - Moumita

@Moumita 这会让事情变得更加困难。如果您可以使用jQuery，您或许可以循环遍历元素并更新它们的文本值而不是HTML。 - Richard Dalton

让我们在聊天中继续这个讨论：http://chat.stackoverflow.com/rooms/4262/discussion-between-moumita-and-richard-d - Moumita

Answer 3

你应该在同一个变量上进行操作。你将oldvar放在循环外面，但从未将更改后的内容放回到oldvar中。因此，只有最后一次迭代会替换内容。

- campino2k

Answer 4

在每次迭代中，您都在变量oldvar上调用replace（该变量在此片段中未声明），因此每次都从相同的点 - 未突出显示的字符串 - 开始。没有看到所有代码，我猜只需将var NewString =替换为oldvar =，并将.innerHTML = NewString替换为.innerHTML = oldvar即可解决问题。

- Gustav Barkefors