every letter different color in string, HTML PHP
Question
I need to print every character of string with different color (not random colors) using only HTML and PHP. It almost works, but first letter from array is black. Do you know why?
<html>
<?php
$myString = ["s","t","r","i","n","g"];
$myColors = ["blue","green","yellow","brown","gray","pink"];
for ($i = 0; $i < count($myString); $i++) {
echo "$myString[$i] <span style='color:$myColors[$i]'</span>";
}
?>
</html>
6 answers
solution1
2 2017-06-06 15:37:59
Seems like you didn't close your span tag correctly, and putting your string inside your span will help coloring it.
<?php
$myString = ["s","t","r","i","n","g"];
$myColors = ["blue","green","yellow","brown","gray","pink"];
for ($i = 0; $i < count($myString); $i++) {
echo "<span style='color:$myColors[$i]'>$myString[$i]</span>";
}
solution2
1 2021-08-16 14:34:28
This function will take the Phrase & Color list and will color each character from the list in the order specified. It will also skip punctuation & white spaces to stay within meaningful printable characters between '0' & 'z' in the ASCII table.
function ColoredPhrase(string $Phrase, string $ColorList){
$ColorList = explode(",", str_replace(" ", null, $ColorList));
$ColorCount = count($ColorList);
$ColorIndex = -1;
for($CharacterIndex = 0; $CharacterIndex < strlen($Phrase); $CharacterIndex++){
$Character = $Phrase[$CharacterIndex];
if($Character >= "0" && $Character <= "z"){
$ColorIndex = $ColorIndex < ($ColorCount - 1) ? $ColorIndex + 1 : 0;
$HTML[] = "<span style=\"color: {$ColorList[$ColorIndex]};\">{$Character}</span>";
}else{
$HTML[] = $Character;
}
}
return implode($HTML);
}
var_dump(ColoredPhrase("Hello, World!", "Violet, Blue, Sky, Green, Yellow, Orange, Red"));
The example will take a Phrase containing multiple characters and will color them through the rainbow color table, meaning, the function will generate equivalent HTML through PHP.
solution3
0 2017-06-06 15:38:04
字符不在彩色范围内，并且您缺少> ：
echo "<span style='color:$myColors[$i]'>$myString[$i]</span>";
solution4
0 2017-06-06 15:38:05
I think your HTML is broken. You need to include $myString[$i] inside the <span> element and close it properly.
$myString = ["s","t","r","i","n","g"];
$myColors = ["blue","green","yellow","brown","gray","pink"];
for ($i = 0; $i < count($myString); $i++) {
echo "<span style='color:$myColors[$i]'>$myString[$i]</span>";
}
solution5
0 2017-06-06 15:54:19
<html>
<?php
$myString = ["s","t","r","i","n","g"];
$myColors = ["blue","green","yellow","brown","gray","pink"];
for ($i = 0; $i < count($myString); $i++) {
echo "<span style='color:$myColors[$i]'> $myString[$i] </span>";
}
?>
</html>
solution6
-1 2021-08-16 15:34:49
You can cycle through your array of colours (over and over) by calculating the targeted index with the modulus operator. You can target the visible characters in your string with a simple regex pattern.
I prefer to use printf() / sprintf() when text is concatenated with operations or several variables.
Code: ( Demo )
$palette = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
$count = count($palette);
echo preg_replace_callback(
'~\PZ~u',
function($m) use($palette, $count) {
static $i = 0;
return sprintf('<span style="color:%s">%s</span>', $palette[$i++ % $count], $m[0]);
},
'Stack Overflow volunteerism'
);
You will notice that the letters are wrapped in span tag with specified colors. The spaces are not wrapped in tags because that would be needless markup bloat. \\PZ is a unicode/multibyte-safe way of saying any non-whitespace character.
Here's a slight variation of the same technique:
echo preg_replace_callback(
'~\PZ~u',
function($m) {
static $i = -1;
static $palette = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
return sprintf(
'<span style="color:%s">%s</span>',
$palette[++$i] ?? $palette[$i = 0],
$m[0]
);
},
'Stack Overflow volunteerism'
);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.