替换同一文本中的多个输入值

Question

这是另一个与我之前的帖子相关的问题：Replace several input values

基本上在我的聊天系统中。当用户在输入框中输入'message hello!'时，只输出'hello!'。 shout 命令也是如此。 （见下面的代码）。

但是，如果用户键入“shout message hello!”，我仍然希望 shout 和 message 都被忽略。事实并非如此！谁能帮我把这件事包起来？

function checkValue() {
  var value = document.getElementById("userinput").value;
  // message
  if(value.indexOf("message") != -1) {
    $('#output').html(value.replace('message', ''));
  }
  // shout
  else if(value.indexOf("shout") != -1) {
    $('#output').html(value.replace('shout', ''));
  }
  else {
  // ...
  }
}

谢谢！

Answer 1

如果您使用 if else 只会运行一个条件，为了满足您的场景，您需要同时运行这两种情况。

function checkValue() {
  var value = document.getElementById("userinput").value;
  // message
  if(value.indexOf("message") != -1) {
    $('#output').html(value.replace('message', ''));
  }
  // shout

  if(value.indexOf("shout") != -1) {
    $('#output').html(value.replace('shout', ''));
  }
  else {
  // ...
  }
}

Answer 2

只需删除其他。您希望所有检查都发生……而不是其中一项。

function checkValue() {
  var value = document.getElementById("userinput").value;
  // message
  if(value.indexOf("message") != -1) {
    $('#output').html(value.replace('message', ''));
  }
  // shout
  if(value.indexOf("shout") != -1) {
    $('#output').html(value.replace('shout', ''));
  }
}

Answer 3

我认为你可以使用正则表达式：

value = value.replace(/(message|shout) +/g, '');

Answer 4

function checkValue() {
  var value = document.getElementById("userinput").value;
  if(value.indexOf('shout message') !== 0){
      // message
      if(value.indexOf("message") != -1) {
        $('#output').html(value.replace('message', ''));
      }
      // shout
      else if(value.indexOf("shout") != -1) {
        $('#output').html(value.replace('shout', ''));
      }
      else {
      // ...
      }
  }
}

Answer 5

不要理会if，使用正则表达式：

$('#output').html(value.replace(/shout|message/gi, ''));

如果您有一系列想要阻止的字词：

var unspeakables = ['shout', 'message', 'whatever'];
$('#output').html(value.replace(new RegExp(unspeakables.join('|'),'gi'), ''));

gi 表示正则表达式将在字符串中全局搜索 (g)，并且不区分大小写 (i)，因此它将匹配 shout、SHOUT 和 ShoUT (以及其他大写/小写组合）。

不幸的是，上面还将匹配shouting 和shouted 中shout 的字符序列，如果这是您的用例中的错误，您可以使用\b 来表示必须是词尾作为匹配的一部分找到：

var unspeakables = ['shout', 'message', 'whatever'];
$('#output').html(value.replace(new RegExp('\\b' + unspeakables.join('\\b|\\b') + '\\b','gi'), ''));

\b 变为 \\b 以转义 \ 字符，该字符本身正在转义 b 字符（使其成为特殊字符，而不是要找到的文字 b 字符（正则表达式是有点复杂，而且经常显得晦涩难懂）。

如果您不介意，我也会跟进。我的 shout 将文本颜色变成“红色”，就像 $('#output').css("color", "red"); 一样，而我的 message 却没有。如果文本包含“喊”，则文本应变为红色。否则它应该保持不变。我知道如何继续，但不知道如何提及“喊”。

你可以使用一个对象，再加上replace()可用的回调函数：

var unspeakables = ['shout', 'message', 'whatever'],
    formatting = {
        'shout' : {
            'color' : 'red'
        }
    };
$('#output').html(value.replace(new RegExp('\\b' + unspeakables.join('\\b|\\b') + '\\b','gi'), function(matchedWord){
    $('#output').css(formatting[matchedWord.toLowerCase()] || {});
    return '';
}));

JS Fiddle demo.

参考资料：

• Array.prototype.join()。
• JavaScript regular expressions。