Question

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

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

这是我的contenteditable div

的HTML

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

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

Answer 1

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

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

Answer 2

处理此问题的一般方法如下：

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

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

regexp是根据字典关键词构建的（注意它们不能包含RegExp特殊字符）。

现在进行替换，使用替换字符串替换的函数，函数只返回相应键的值。

  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/

Answer 3

我认为金昭的答案涵盖了它，但还有其他一些注意事项 1）不要在RegEx中使用“ 2）您可以匹配多个字符串，但我认为只使用一个RegEx替换为一个值。我认为匹配多重的唯一方法就是金昭所做的。

以下代码段似乎对我有用：

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

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

如何用.replace（）方法替换多个字符串？

3 个答案: