如何用javascript中的条件替换字符串

Question

我的应用有TextArea 和Input。

❶=red, ❷=green, ❸=blue.

用户将sentence写入TextArea：并将sentence输入Input，他想更改其颜色。

sentence 是：

Hi hola, how are you, are you ok -> 转到TextArea

how are you 或 are you 或 you -> 转到 Input

现在用户想要更改一些words的color。

第 1 步

用户选择you并希望将其color更改为red；

所以正确的是：

Hi hola, how are #❶you#, are #❶you# ok

第 2 步

用户的想法变了，现在想选中are you，把两个字把are you的color改成green；

所以正确的是：

Hi hola, how #❷are you#, #❷are you# ok

第 3 步

用户的想法again变了，现在想选中how are you，把三个字how are you的color改成blue；

这里的第二个are you 仍然来自Step 2

所以正确的是：

Hi hola, #❸how are you#, #❷are you# ok

现在让我们思考以上unlike：

第 1 步

用户想选中how are you，把三个字把how are you的color改成red；

所以正确的是：

Hi hola, #❶how are you#, are you ok

第 2 步

用户的想法变了，现在想选中are you，把两个字把are you的color改成green；

所以在第1步中，他将three word (how are you)设为red，并在第2步将two word (are you)颜色更改为@ 987654370@，所以one word how 从第一步仍然是红色的，但are you 是green

所以正确的是：

Hi hola, #❶how# #❷are you#, #❷are you# ok

第 3 步

用户的想法 again 已更改，现在只想选择you 并将一个字 you 的color 更改为blue ;

所以在 第 1 步中，他将 three word (how are you) 作为 red，在 第 2 步中，他将 one word -> how 作为red 和 two word -> are you 为 green，但在此步骤 3 中仅将单词 you 的 color 更改为 blue，因此 how 仍然red 来自 步骤 1，are 是 green 来自 步骤 2，you 是 blue 来自 步骤 3

所以正确的是：

Hi hola, #❶how# #❷are# #❸you#, #❷are# #❸you# ok

//我的努力是：

let globalBalString = "Hi hola, how are you, are you ok";
let reminderObject = {};

// 这个函数在 react functional component.

const makeStyle = (sentence, colorSymbole) => {

   if(reminderObject[sentence] === undefined){
      reminderObject[sentence] = colorSymbole;
      var newString = globalBalString.replace(new RegExp(sentence, "g"), `#${colorSymbole}${sentence}#`);
      globalBalString = newString;
   }else{
      reminderObject[sentence] = colorSymbole;
      var newString = globalBalString.replace(new RegExp(`#${reminderObject[sentence]}${sentence}#`, "g"), `#${colorSymbole}${sentence}#`);
      globalBalString = newString;
   }

}

我的解决方案仅适用于步骤 1，但不适用于 步骤 2 和步骤 3

Answer 1

你可以使用正则表达式

(?<!\bare )\byou\b|(?<!\bhow )\bare you\b|\bhow are you\b

（设置大小写无关标志）将每个匹配替换为用井号括起来的匹配。

Javascript demo

如链接所示，为字符串

You should know better but are you crazy or how are you to know?

共有三个匹配项：you、are you 和 how are you。当每个都被包含在井号中的自身替换时，结果字符串是

#You# should know better but #are you# crazy or #how are you# to know?

如果字符串you、are you和how are you在字符串中的位置重新排列，则得到相同的结果。

Javascript 的正则表达式引擎执行以下操作。

(?<!\bare )      do not match 'are ' preceded in a word
                 break before the following match
\byou\b          match 'you' surrounded by word breaks
|                or
(?<!\bhow )      do not match 'how ' preceded in a word
                 break before the following match
\bare you\b      match 'are you' surrounded by word breaks
|                or
\bhow are you\b  match 'how are you' surrounded by word breaks

(?<!...) 是一个消极的后视。

动态构造正则表达式当然是必要的。我从论点"how are you" 构造了这个。我不懂 Javascript，所以我必须把它留给其他人来提供构造代码，但我已经提供了伪代码来做到这一点（实际上是简化但有效的 Ruby 代码）here。

Answer 2

您可以使用模式和闭包函数来实现。

var str = "Hi hola, how are you, are you ok";
const replacer = (str, start) => {
  const re = new RegExp(`(${start})`, "g");
  let s = "";
  return () => {
    s = s === "" ? str.replace(re, "#$1#") : s.replace(/(\w+ )#/g, "#$1");
    return s;
  };
};
const replace = replacer(str, "you");
console.log(replace());
console.log(replace());
console.log(replace());