更改字符串中每个单词的字体颜色（JS 或 PHP）答案

【问题标题】：Change font color for each word in a string (JS or PHP)更改字符串中每个单词的字体颜色（JS 或 PHP）
【发布时间】：2015-12-22 03:42:44
【问题描述】：

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

示例标题：

这是我的新头衔

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

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>

【问题讨论】：

如果你知道 jquery，你可以使用它来做一些 dom 调整
对于其他想看看这个解决方案如何发挥作用的人。我在这里创建了一个 JSFIDDLE：jsfiddle.net/revive/xyy04u7d 它增加了 Tushar 提供的内容并否定了正则表达式中的 &（我需要与前面的单词在同一行）。

标签： javascript php jquery css colors

【解决方案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;
}

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"&gt;&lt;/script&gt;

你也可以像下面这样使用正则表达式：

$("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>

【讨论】：

如果你想要PHP解决方案，你可以在PHP中使用类似的方法
非常好.. 感谢您提供如此简单的解决方案.. 是的，甚至可以将其重构为 PHP .. 但是，JS 版本效果很好。再次感谢。
@revive 很高兴我能帮上忙 :)

【解决方案2】：

这是一个演示，它根据空格分割单词，用类名将每个单词包装在一个跨度中。您可以使用类名随意设置元素的样式。

var str = "Here Is My New Title which may well be way too longer than I have actually provided";
var res = "";

str.split(/\s+/).forEach(function(str, idx) {
  //Would only work with the string in question
  //res += "<span class='color-"+(idx+1)+"'>" + str + " </span>";
  //Would work with any amount of words in a string, applying the same set of classes every 5 words.
  res += "<span class='color-" + (idx % 5) + "'>" + str + " </span>";
});

$("body").append(res);

.color-0 {
  color: violet;
}
.color-1 {
  color: indigo;
}
.color-2 {
  color: blue;
}
.color-3 {
  color: green;
}
.color-4 {
  color: red;
}

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案3】：

类似的答案

更改特定文本

first = str.substring(0,till);
    second = str.substring(till,last);
    //Print data
    $(this).html("<span style=color:"+setting.color+">"+first+"</span>"+ second);

下载插件：string_color

【讨论】：