Как раскрасить строку с шестнадцатеричными цветами в Javascript

Question

Я хотел бы извлечь шестнадцатеричные цвета из строки и создать цветной код html. Пример: У меня есть эта строка:

#ff0000He#ffccccllo

было бы преобразовать его в

<span style="color:#ff0000">He</span><span style="color:#ffcccc">llo</span>

Answer 1

Вы можете сделать это с помощью 'разбить' с RegExp

Что-то вроде:

var str = '#ff0000He#ffccccllo#123123sdfsdfsdfsdf#AA6456asdasdasd'; 
 
var expR = /(#[0-9|a-f]{6})/gi 
 
var a = str.split(expR); 
 
a.shift(); 
 

 
var output = '' 
 
for (var i = 0; i < a.length; i++) { 
 
    var color = a[i]; 
 
    var text = a[++i];  
 
    output += '<span style="color: ' + color + '">' + text + '</span>'; 
 
    
 
}; 
 
document.getElementById("result").innerHTML = output;

<div id="result"> 
 

 
</div>

Answer 2

Это будет делать трюк:

var input = '#ff0000He#ffccccllo'.split('#'); 
var output = ''; 
input.filter(function (str) { 
    return !!str; 
}).forEach(function (str) { 
    output += '<span style="#' + str.slice(0, 6) + '">' + str.slice(6) + '</span>'; 
}) 
console.log(output) // --> <span style="... 

Или как функцию:

function convert(input) { 
    input = input.split('#'); 
    var output = ''; 
    input.filter(function (str) { 
    return !!str; 
    }).forEach(function (str) { 
    output += '<span style="#' + str.slice(0, 6) + '">' + str.slice(6) + '</span>'; 
    }) 
    return output; 
} 

ОБНОВЛЕНИЕ: исправлена ​​ошибка в функции dfn. Работает сейчас.

Answer 3

Single-вкладышем с регулярным выражением заменить:

"#ff0000He#ffccccllo#ffccccooo".replace(/(#.{6})([^#]*)/g, '<span style="color: $1">$2</span>') 

Fiddle