jquery - 用相同的文本替换几个输入值

这是与我以前的线程有关的另一个问题：Replace several input values

基本上在我的聊天系统中。当用户键入“消息你好！”在输入框中，只有“你好！”输出。 shout命令也是如此。 （请参见下面的代码）。

但是，如果用户键入“ shout message hello！”我仍然希望同时忽略喊叫声和消息。事实并非如此！谁能帮我总结一下吗？

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 {
  // ...
  }
}

谢谢！

最佳答案

只是不必理会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（以及其他大写字母） /小写字母组合）。

不幸的是，上面的代码也匹配了shout和shouting中的shouted字符序列，如果这是用例中的错误，则可以使用\b表示必须找到单词结尾一场比赛：

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

\b变为\\b以逃避\字符，该字符本身已转义b字符（使其成为特殊字符，而不是要找到的文字b字符（正则表达式有些复杂，并且，经常出现奥术）。


如果您不介意，我也会跟进。我的喊叫将文本颜色变成“红色”，而$('#output').css("color", "red");却不显示。如果文本包含“喊”，则文本应变为红色。否则它应该保持不变。我有一个如何进行的想法，但不知道如何提及“喊叫”。


您可以将对象与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。

关于jquery - 用相同的文本替换几个输入值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22647681/