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

Jinzhao からの回答でカバーされていると思いますが、他にもいくつか注意事項があります。
1) RegEx で " を使用しないでください
2) 複数の文字列に一致させることができますが、単一の RegEx を使用して 1 つの値にしか置換できないと思います。

次のコードスニペットは私にとってはうまくいくようです： 

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

私が見つけたもう1つの問題は、置換が発生すると、カーソルがテキストボックスの先頭に戻り、イライラすることです。それに対する答えが見つかったら、投稿します。

于 2012-12-23T18:14:43.803 に答える