Раскрашивание следующего символа с помощью javascript

#javascript #html #css #string #char

#javascript #HTML #css #строка #символ

Вопрос:

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

 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" amp;amp; 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>

Мы высоко ценим вашу помощь.

Ответ №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" amp;amp; 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>

Ответ №2:

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

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