如何将颜色更改为数组字符串中的特定单词？ ：Javascript / jQuery

Question

我在网站标题上有一个标题，它将以给定的时间间隔显示（标题在数组中声明）。

我想更改字符串集中特定单词的颜色。例如，想要更改Lucky，Vasudeva和Krishna的颜色。

var caption = document.getElementById('caption');
var text = ['Ajay garidipuri lucky ', 'Vasudeva Vijay', 'Mude krishna unlucky '];

function display(i) {
  if (i >= text.length) {
    i = 0;
  }
  caption.innerHTML = text[i];
  setTimeout(function() {
    display(i + 1)
  }, 6000)
}
display(0)

.content-video h1 {
  font-size: 52px;
  margin-bottom: 6px;
  text-align: center;
  color: white;
  padding-top: 25%;
  padding-left: 0%;
  padding-right: 3%;
  font-weight: bold;
  text-shadow: 2px 2px 4px #000000;
}

#caption {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

<div class="content-video">
  <h1><span id="caption"> </span></h1>
</div>

谢谢！

Answer 1

好吧。据我所知，现在有一种方法可以更改字符串中特定单词的样式，除非您用自己的标签（例如或）包装您的单词，并为该标签指定颜色的样式/类别你想要的。

这意味着您无需执行caption.innerHTML = text[i];，而是需要在其中附加内部<span>或其他标签。

因此您的最终HTML应该类似于：

<span id="caption"> Ajay garidipuri <span class='lucyColor'>lucky</span></span>