向控制台日志添加颜色

Question

如何使console.log颜色与多个参数一起工作？

不工作：

console.log('%cTEXT', 'color:orange', 'MORE \x1B[42m[TEXT]\033[39m: HERE')

WORKS:

console.log('MORE \x1B[42m[TEXT]\033[39m: HERE')

console.logs结果

不工作： UPDATE使用替换字符串失败。这可能是编码问题吗？

let a = "this is a [string] blah"
let replacedStr = a.replace(/(\[\w+\])/g, function (match, p1) {
  return '%c' + p1 + '%c'
})
let replaceStrWithColor = [replacedStr, 'color:red;color:reset']

console.log.call(console, '%csomething', 'color:green', ...replaceStrWithColor)

如果您运行上面的示例，您将看到“某事”是绿色的，并且输出：something this is a %c[string]%c blah color:red;color:reset

Answer 1

console.log格式化程序从左到右使用参数，每个参数(在第一个参数之后)指示要应用于文本中相应的说明符的格式。因此，如果您希望在文本的不同位置应用多个CSS属性，只需在文本中添加必要的%c说明符，并将其与相同数量的参数匹配以进行格式化。每个格式化参数将从其说明符出现的点起生效。

console.log('%cRed %cGreen %cBlue', "color:red", "color:green", "color:blue");

编辑，这真的不清楚你想在这里做什么。我想你是想同时改变颜色和替代字符串？如果是的话，这是完全可能的，但是字符串替换说明符与用于颜色的说明符(%s而不是%c)不同。

console.log(
  '%c%s %c%s %c%s',
  "color:red",
  "string replacement (red)",
  "color:green",
  "string replacement (green)",
  "color:blue",
  "string replacement (blue)"
);

​

​

1. 第一个%c将"color:red“设置为CSS样式。
2. 第一个%s替换为“字符串替换(红色)”。
3. 第二个%c将“色:绿色”设置为CSS样式。
4. 第二个%s替换为“字符串替换(绿色)”。
5. 等等。

注意字符串中的每个说明符是如何匹配的，按顺序，在第一个参数之后每个参数匹配到console.log (第一个参数是字符串执行格式化)。

如果这一点还不清楚，我认为您需要在原来的文章中增加更多的清晰度，或者只是尝试阅读/练习这个模式。

https://console.spec.whatwg.org/#formatter

Answer 2

我认为这是因为第一次使用console.log时，替换字符串使用了无效数量的args。

也许这就是你要找的？.

console.log('MORE \x1B[42m[%s]\033[39m: HERE', 'TEXT');

跟踪不够好吗？我还是不明白你想要实现什么.

let a = "this is a [string] blah"
let replacedStr = a.replace(/(\[\w+\])/g, function (match, p1) {
  return '\x1B[42m' + p1 + '\033[39m:';
});
console.log(replacedStr);

要使用color:orange语法吗？

​

​

另一个编辑

我想我能理解你想要什么。您希望传递多个字符串，并对每个字符串应用不同的颜色。您别无选择，只能使用1字符串，它将包含所有子字符串，然后是每个子字符串的颜色：

let stringsToColor = ["The", "quick", "brown", "fox", "jumps overthe lazy", "dog"];
console.log('%c' + stringsToColor.join('%c '), 'color:purple', 'color:yellow', 'color:brown', 'color:orange', 'color:reset', 'color:blue');

您可以尝试通过这样的操作来减少此代码的丑陋：

let coloredStrings = [
    {str: 'The', color: 'purple'}
    , {str: 'quick', color: 'reset'}
    , {str: 'brown', color: 'brown'}
    /*etc*/
];
console.log(
    coloredStrings.map(val => '%c' + val.str).join(' '), 
    ...coloredStrings.map(val => `color:${val.color};`)
);

但是，您必须首先处理字符串的内容，才能获得所需的数组。