javascript - 如何拆分字符串并为每个字符串制作颜色？

Question

我有一个"I like you"从 h2 元素获取的字符串："<h2 id="demo">I like you</h2>" 现在我想将它拆分为两个空格之间的每个单词生成颜色。如何更改标签中每个文本的颜色。我可以为每种颜色使用 array[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;
}