如何使用`replace`方法将多个关键字替换为对应的关键字？答案

【问题标题】：How to replace multiple keywords by corresponding keywords with the `replace` method?如何使用`replace`方法将多个关键字替换为对应的关键字？
【发布时间】：2012-12-23 17:50:39
【问题描述】：

我想制作一个内容可编辑的 div，在其中我用星号替换显式单词。这是我的 JavaScript 代码：

function censorText(){
    var explicit = document.getElementById("textbox").innerHTML;
    var clean = explicit.replace(/"badtext1","cleantext1"|"badtext2","cleantext2"/);
    document.getElementById("textbox").innerHTML = clean;
}

这是我的<div contenteditable> 的 HTML：

<div contenteditable="true" onkeyup="censorText()" id="textbox">Hello!</div>

如您所见，我尝试使用正则表达式运算符一次替换多个字符串，但它不起作用。它不会用cleantext2 替换badtext2，而是用0 替换badtext1。如何让单个.replace() 语句替换多个字符串？

【问题讨论】：

标签： javascript regex string replace

【解决方案1】：

使用/.../g 表示全局替换。

var clean = explicit.replace(/badtext1/g,"cleantext2"/).replace(/cleantext1/g,"cleantext2"/).replace(/badtext2/g,"cleantext2"/);

【讨论】：

您还可以（同时）用多个其他字符串替换多个字符串，如下所述：stackoverflow.com/a/15604206/975097

【解决方案2】：

一般的处理方法如下：

建立字典并构建正则表达式：

  var dictionary = { bad: 'good', worse: 'better', awful: 'wonderful'},
      regexp = RegExp ('\\b(' + Object.keys (dictionary).join ('|') + ')\\b', 'g');

正则表达式由字典关键字构成（注意它们不能包含正则表达式特殊字符）。

现在做一个替换，用一个函数代替替换字符串，函数简单地返回对应键的值。

  text = text.replace (regexp, function (_, word) { return dictionary[word]; });

OP 没有提到大写/小写。以下内容适用于初始和所有大写，并将代码包装为函数：

  function clean (text) {
    var dictionary = { bad: 'good', worse: 'better', awful: 'wonderful'},
        regexp = RegExp ('\\b(' + Object.keys (dictionary).join ('|') + ')\\b', 'ig');

    return text.replace (regexp, function (_, word) { 
      _ = dictionary[word.toLowerCase ()];
      if (/^[A-Z][a-z]/.test (word)) // initial caps
        _ = _.slice (0,1).toUpperCase () + _.slice (1);
      else if (/^[A-Z][A-Z]/.test (word)) // all caps
        _ = _.toUpperCase ();
      return _;
    });
  }

见小提琴：http://jsfiddle.net/nJNq2/

【讨论】：

【解决方案3】：

我认为金兆的回答涵盖了它，但还有一些其他说明。
1) 不要在 RegEx 中使用 "
2）您可以匹配多个字符串，但我认为只能使用单个正则表达式替换为一个值。我能想到的匹配多个的唯一方法是金兆所做的。

以下代码 sn-p 似乎对我有用：

function censorText(){             
    var explicit = document.getElementById("textbox").innerHTML;
    var clean = explicit.replace(/bad|worse/gi,"good");
     document.getElementById("textbox").innerHTML = clean;
}

我发现的另一个问题是，当发生替换时，它会将光标返回到文本框的开头，这会令人沮丧。如果我找到答案，我会发布。

【讨论】：