как заменить строку условиями в 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

Теперь Пользователь хочет изменить color некоторого words.

Шаг 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 's color до blue;

Здесь второй are you остается от om 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) на green, поэтому one word how все еще красный от шаг 1 , но are you это green

Так будет правильно с:

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

Шаг 3

Идея пользователя again изменилась и теперь хочет выбрать только you и изменить одно слово you color на blue;

Итак, здесь, в Шаг 1 У него было * 1 172 * (how are you) как red, а в Шаг 2 он имел one word -> how как red и two word -> are you как green, но в это Шаг 3 изменил только color слова you на 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 = {};

// эта функция внутри реагирует 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 код) здесь .

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());