javascript - 文字列を分割してそれぞれに色を付ける方法は?

Question

"I like you"h2要素から取得した文字列があります。"<h2 id="demo">I like you</h2>" これを分割して、2つの空白の間の各単語の色を作成します。タグ内の各テキストの色を変更するにはどうすればよいですか。各色に配列[i]を使用する場合があります。

array[1], color:red
array[2], color:green
array[3], color:blue

オンロードすると色が変わります。すべての提案に感謝します。

Answer 1

試す

var array = ['red', 'green', 'blue'];

$('#demo').html(function(idx, html){
    return $.map(html.split(/\s/), function(value, idx){
        if(idx < array.length){
            return '<span style="color: ' + array[idx] + '">' + value + '</span>'
        } else {
            return value
        }
    }).join(' ');
})

デモ:フィドル

Answer 2

探しているもののより良い例を示すまでの提案

$(document).ready(function(){
  $.each(array, function(id,value) {
    var color = value.strreplace('color:','');
    $('#'+id).css('color', color);
  });
});

Answer 3

シンプルなJavascriptを介して、

function str_split (string, split_length) {
   if (split_length === null) {
    split_length = 1;
  }
  if (string === null || split_length < 1) {
    return false;
  }
  string += '';
  var chunks = [],
    pos = 0,
    len = string.length;
  while (pos < len) {
    chunks.push(string.slice(pos, pos += split_length));
  }

  return chunks;
}