Question

我已经搜索过但无法找到一个解决方案来为标题中的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中存在解决方案。

目标：我需要为字符串中的每个单词增加字体颜色（甚至包括跨度中的连续单词并增加SCSS var）。打开建议。

更新我已经添加了一个jsfiddle链接（http://jsfiddle.net/revive/xyy04u7d/）来显示JS实现，感谢Tushar，在正则表达式中包含了＆符号的一些更改。

以下是 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

这是一个基于空格分割单词的演示，用类名包装跨度中的每个单词。您可以使用类名来设置元素的样式。

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

＆＃13;

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);

＆＃13;

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;
}

＆＃13;

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

＆＃13;

您还可以使用正则表达式：

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 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

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

3 个答案: