web-dev-qa-db-ja.com

複数の文字列を.replace（）メソッドで置き換える方法は？

明示的な単語をアスタリスクに置き換えるコンテンツ編集可能な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()ステートメントで複数の文字列を置き換えるにはどうすればよいですか？

javascripthtmlregexstringreplace
18
Shrey Gupta

使用する /.../gグローバル置換を示します。

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

これを処理する一般的な方法は次のとおりです。

辞書を作成し、正規表現を作成します。

  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/

9
HBP

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つの問題は、置換が発生すると、カーソルがテキストボックスの先頭に戻り、イライラすることです。それに対する答えを見つけたら投稿します。

3
JonRed