javascript - 更改字符串中每个单词的字体颜色(JS 或 PHP)

Question

我已经搜索过，但找不到为标题中的 3 或 4 个单词中的每一个增加字体颜色(例如亮度 +10%)的解决方案。字体颜色最初将在 SCSS 中设置为颜色变量。

示例标题:

Here Is My New Title

在这个例子中，假设标题是“深蓝色”.. 单词将是:

Here = darker blue
Is = navy blue
My = medium blue
New Title = light blue

这里有一个类似的帖子:JavaScript Text Color Change To Each Word In Array但这是在数组中搜索关键字，而不是字符串中的每个单词。

我也遇到过像这样的基本 CSS/HTML 解决方案，但行不通:HTML: Changing colors of specific words in a string of text

注意:我将在 php 变量中返回标题(字符串)——以防 PHP 中有解决方案。

目标:我需要为字符串中的每个单词增加字体颜色(或者甚至将连续的单词包装在 span 中并增加 SCSS var)。接受建议。

更新感谢 Tushar，我添加了一个 jsfiddle 链接 ( http://jsfiddle.net/revive/xyy04u7d/ ) 来展示 JS 实现，并进行了一些更改以在正则表达式中包含 & 符号。

这是PHP 实现:

<?php
    $title = "SIMPLE TITLE & WITHOUT COLORS";
    $words   = preg_split('/\s+(?!&)/', $title);
?> 
<h3 class="colors blue">
<?php foreach($words as $word):?>
    <span><?php echo $word; ?></span>
<?php endforeach; ?>
</h3>

Answer 1

您可以将每个单词包装在单独的 span 或任何其他元素中，然后可以使用 CSS nth-child 属性设置不同的样式。

使用这种方法，您不必创建单独的类，它适用于字符串中任意数量的单词。

var str = 'Split the Text by one or more spaces. Join them to make them wrap in span elements. Then use CSS nthChild Properties :)';

str = '<span>' + str.split(/\s+/).join('</span> <span>') + '</span>';

$(document.body).append(str);

span:nth-child(4n) {
  color: red;
}
span:nth-child(4n + 1) {
  color: green;
}
span:nth-child(4n + 2) {
  color: blue;
}
span:nth-child(4n + 3) {
  color: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

---

您还可以使用正则表达式，如下所示:

$("h1").html(function(i, oldHtml) {
  return oldHtml.replace(/(\S+)/g, '<span>$1</span>');
});

span:nth-child(4n) {
  color: red;
}
span:nth-child(4n + 1) {
  color: green;
}
span:nth-child(4n + 2) {
  color: blue;
}
span:nth-child(4n + 3) {
  color: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<h1> Hello World! Have a Great Day! </h1>