2番目の配列が終了するまで配列を何度も繰り返します。

Question

テキストを虹色にする関数を作成します。

私は2つの配列を持っています。 1つはカラー用、もう1つはストリング用です。

基本的に何をしようとしているのは、テキストの量に応じて必要な回数だけ色をループすることです。

var colors = ['blue', 'red', 'green', 'black', 'orange', 'purple']; 
 

 
function colorText(word) { 
 
    var slicedText = word.split(''); 
 
    var rainbowText= ''; 
 
    
 
    if (typeof(word) !== 'string') { 
 
    alert('Thats not a word!'); 
 
    } else { 
 
    for (var i = 0; i < slicedText.length; i++) { 
 
     rainbowText += '<span style="color:' + colors[i] + ';">' + slicedText[i] + '</span>'; 
 
    } 
 
    
 
    document.getElementById('text-input').innerHTML = rainbowText; 
 
    } 
 
} 
 

 
colorText('this is a really long text');

<div id="text-input"> 
 
    
 
</div>

Answer 1

slicedText.lengthがcolors.length以上であるときは、色の配列の範囲外インデックス化されています。目的の動作が、色の終わりに達した後にインデックス0から開始する場合は、モジュロ演算子を使用します。

colors[ i % colors.length ]

var colors = [ 'blue', 'red', 'green', 'black', 'orange', 'purple' ]; 
 

 
function colorText(word) { 
 
    var slicedText = word.split(''); 
 
    var rainbowText = ''; 
 

 
    if (typeof(word) !== 'string') { 
 
    alert('Thats not a word!'); 
 
    } else { 
 
    for (var i = 0; i < slicedText.length; i++) { 
 
     rainbowText += '<span style="color:' + colors[ i % colors.length ] + ';">' + slicedText[ i ] + '</span>'; 
 
    } 
 

 
    document.getElementById('text-input').innerHTML = rainbowText; 
 
    } 
 
} 
 

 
colorText('this is a really long text');

<div id="text-input"> 
 
    
 
</div>

Answer 2

空白を着色することなく、同じジョブを実行する別の方法。

var str = "this is a really long text", 
 
colors = ['blue', 'red', 'green', 'black', 'orange', 'purple'], 
 
result = [...Array(str.length)].reduce((p,_,i) => p + (str[i] !== ' ' ? '<span style="color:'+colors[i%colors.length]+';">' + str[i] + '</span>' 
 
                     : ' '),''); 
 
document.getElementById("textdiv").innerHTML = result;

<div id="textdiv"></div>