如何在 Javascript 中使用十六进制颜色为字符串着色

Question

我想从字符串中提取十六进制颜色并生成彩色 html 代码。示例：我有这个字符串：

#ff0000He#ffccccllo

它会将其转换为

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

Answer 1

这样做就可以了：

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 2

您可以使用 'split' 和 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 3

使用正则表达式替换的单行代码：

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

Fiddle

如何在 Javascript 中使用十六进制颜色为字符串着色

How to colorize a string with hex colors in Javascript

javascript

string

hex