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中。但是，循环中的下一个字母是原始文本中的“ a”，它也被添加到newText中，从而导致重复的“ a”。有几种解决此问题的方法：第一种解决方案是在i++之后添加newText += "<span class='clrRed'>" + char.concat(nextChar) + "</span>";。第二种解决方案是在其他字符之后添加一个if，以检查字符是否为紧随“ E”之后的“ a”。可以这样完成：

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

使用javascript为下一个字符着色

2 个答案: