0

そのため、テキスト内のすべての単語を異なる色にしたかったのですが、テキスト内のすべての文字を異なる色にするコードしか見つかりませんでした。これを回して、すべての文字ではなくすべての単語の色を変更する方法はありますか？

<script type="text/javascript">
       var message = "The quick brown fox.";
       var colors = new Array("#ff0000","#00ff00","#0000ff"); // red, green, blue
       for (var i = 0; i < message.length; i++)
          document.write("<span style=\"color:" + colors[(i % colors.length)] + ";\">" + message[i] + "</span>");
    </script>
4

4 に答える 4

2

小さな変更が必要です。

メッセージをスペースで配列に分割します（" "）

   var message = "The quick brown fox.";
   var messageArr = message.split(" ");
   var colors = ["#ff0000","#00ff00","#0000ff"]; // red, green, blue
   for (var i = 0; i < messageArr .length; i++)
   {
      document.write("<span style='color:" + colors[(i % colors.length)] + ";'>" + messageArr[i] + " </span>");
   }

このJSFiddleでご覧ください

注：colors配列定義を配列リテラル表記を使用するように変更しまし[]た。これは、配列を宣言するための少し優れた方法です。

于 2012-09-29T12:57:22.533 に答える
1 
var message = "The quick brown fox.",
    words   = message.split(/\s+/),
    colors  = ['#ff0000', '#00ff00', '#0000ff'];

for (var i = 0; i < words.length; i++) {
    document.write('<span style="color: ' + colors[(i % colors.length)] + ';">' + words[i] + '</span>');
}
于 2012-09-29T12:58:13.573 に答える
1 
var text = "Glee is very very awesome!";
text = text.split(" ");
var colors = ["red", "green", "rgb(0, 162, 232)"]; //you can use color names, as well as RGB notation
var n = colors.length; //no need to re-grab length each time
for(var i = 0; i < text.length; i ++) {
    document.write('<span style = "color: ' + colors[i % n] + '">' + text[i] + '</span>');
}

小さなデモ：小さなリンク。

于 2012-09-29T13:00:17.113 に答える
0

別の方法を試してみましょう。ライブデモ。

var message = "The quick brown fox.",
    colors = ["#ff0000","#00ff00","#0000ff"],
    i = 0, len = colors.length;

message = message.replace(/\b(\w+)\b/g, function (match, word) {
    return '<span style="color: ' + colors[(i++ % len)] + ';">' + word + '</span>';
});
document.write(message);
​
于 2012-09-29T13:03:51.900 に答える