22

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

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

这是我的 HTML <div contenteditable>：

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

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

4

3 回答 3

28

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

var clean = explicit.replace(/badtext1/g,"cleantext2"/).replace(/cleantext1/g,"cleantext2"/).replace(/badtext2/g,"cleantext2"/);
于 2012-12-23T18:03:41.690 回答
11

处理此问题的通用方法如下：

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

  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/

于 2012-12-23T18:46:15.287 回答
3

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

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

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

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

于 2012-12-23T18:14:43.803 回答