Как заменить несколько строк методом .replace()?

Я хочу сделать контент editable div, в котором я заменяю явные слова звездочками. Это мой код JavaScript:

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

Здесь HTML для моего contenteditable div

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

Как вы можете видеть, я попытался использовать оператор regex для замены сразу нескольких строк, но он не работает. Он не заменяет badtext2 на cleantext2, и он заменяет badtext1 на 0. Как я могу сделать один оператор .replace() заменить несколько строк?

Ответ 1

используйте /.../g, чтобы указать глобальную замену.

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

Ответ 2

Общий способ справиться с этим заключается в следующем:

Создайте словарь и создайте регулярное выражение:

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

Регулярное выражение создается из ключевых слов словаря (обратите внимание, что они не должны содержать специальных символов 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/

Ответ 3

Я думаю, что ответ от Jinzhao об этом покрывает, но некоторые другие заметки.
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;
}

Другая проблема, которую я нахожу, заключается в том, что когда происходит замена, она возвращает курсор в начало текстового поля, которое будет расстраивать. Если я найду ответ на этот вопрос, я отправлю сообщение.