Раскраска следующего персонажа с использованием JavaScript

Question

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

var myString = "Eagles are birds of prey.";
var newText = "";

for (var i = 0; i < myString.length; i++) {
  var char = myString.charAt(i);
  var nextChar = myString.charAt(i + 1);

  if (char == "E" && nextChar == "a") {
    newText += "<span class='clrRed'>" + char.concat(nextChar) + "</span>";
  } else if (char == "e") {
    newText += "<span class='clrGreen'>" + char + "</span>";
  } else {
    newText += char;
  }

}
document.getElementById('view').innerHTML = newText;

#view {
  font-size: 28px;
}

.clrRed {
  color: red;
}

.clrGreen {
  color: green;
}

<div id="view"></div>

Ваша помощь очень ценится.

Answer 1

Поскольку вы рассматриваете два символа, вам нужно увеличить i внутри этого условия, чтобы сразу перейти к следующему и избежать дублирования:

var myString = "Eagles are birds of prey.";
var newText = "";

for (var i = 0; i < myString.length; i++) {
  var char = myString.charAt(i);
  var nextChar = myString.charAt(i + 1);

  if (char == "E" && nextChar == "a") {
    newText += "<span class='clrRed'>" + char.concat(nextChar) + "</span>";
    i++; /*added this*/
  } else if (char == "e") {
    newText += "<span class='clrGreen'>" + char + "</span>";
  } else {
    newText += char;
  }

}
document.getElementById('view').innerHTML = newText;

#view {
  font-size: 28px;
}

.clrRed {
  color: red;
}

.clrGreen {
  color: green;
}

<div id="view"></div>

Answer 2

Описанное поведение вызвано простой логической ошибкой: когда вы попадаете на «E», за которым следует «a», вы добавляете «Ea» в прочтении к newText.Однако следующая буква в вашем цикле - это буква «а» из исходного текста, которая также добавляется к newText, что приводит к дублированию «а».Существует несколько возможных решений этой проблемы: Первое решение - добавить i++ после newText += "<span class='clrRed'>" + char.concat(nextChar) + "</span>";.Второе решение состоит в том, чтобы добавить if после вашего последнего, чтобы проверить, является ли символ «a», который следует за «E».Это можно сделать так:

...} else if(char == 'a' && myString.charAt(i-1)=='E') {
  newText += char;
}