使用颜色和围绕非格式化文本的变量格式化console.log

Question

问题

我编写了一个函数来演示如何以各种方式格式化Chrome开发人员控制台console.log（）消息。但是，我遇到问题的是使用颜色方案在左侧打印变量，然后在中间打印一个没有样式的字符串，然后是另一个样式的变量。这是一个图解说明：

此外，此HTML / CSS代码将演示我在开发者控制台中尝试制作的内容：

＆＃13;

＆＃13;

    <p>Array values printed out (equals sign not formatted):</p>

    <span style="background: #ffa600; color: #ffe4b3;">Array[index0]</span> = <span style="background: yellow; color: black; font-style: italic;">http://www.google.com</span><br>
    <span style="background: #ffa600; color: #ffe4b3;">Array[index1]</span> = <span style="background: yellow; color: black; font-style: italic;">http://www.pinterest.com</span><br>
    <span style="background: #ffa600; color: #ffe4b3;">Array[index2]</span> = <span style="background: yellow; color: black; font-style: italic;">http://www.facebook.com</span><br>


    <p>Multiple combinations of formatted and non formatted text:</p>
    <p>
        <span style="background:red;">Red</span>
        <span> and </span>
        <span style="background:aliceblue">AliceBlue</span>
        <span> OR </span>
        <span style="color:forestgreen; font-style: italic; font-weight: bold;">Forest Green</span>
        <span style="background: orange">Orange</span>
        <span>, also this: <span>
        <span style="background:pink; color: brown">  Error Styling </span>
        <span>, etc ...</span>
    </p>

＆＃13;

＆＃13;

＆＃13;

我尝试过的不起作用

来自Colors in JavaScript console的christianvuerings的代码可以连续打印两种不同的样式：

console.log("%cHello, "+"World","color:red;","color:blue;")

我根据该代码进行了尝试。麻烦的是，Christian的代码并没有考虑将非格式化代码夹在格式化代码之间，也没有多个变量。我做了很多尝试来找到正确的代码和排序组合，但最有希望的三个（对我来说）是这些：

console.log("%c%s"+" is "+"%c%d"+"years old.", "color:red","Bob", "color:blue", 42).

console.log("%c%s"," is ","%c%d","years old.", "color:red","Bob", "color:blue", 42).

console.log("%c%s is %c%d years old.", "color:red", "Bob", "color:blue", 42).

我的问题

如何在同一行上打印多个格式化和非格式化代码组合的console.log（）消息？

Answer 1

为了使console.log()格式化，使其允许格式化和未格式化的文本在同一行中，您必须“重置”您在格式化的CSS后更改的css。例如，要显示的日志格式如下面的代码

<span style="background: #ffa600; color: #ffe4b3;">Array[index0]</span> = <span style="background: yellow; color: black; font-style: italic;">http://www.google.com</span>

你需要你的console.log（）调用如下：

代码

console.log("%c%s%c = %c%s","background:orange", "Array[index0]", "background:inherit;", "background:yellow;font-style: italic;", "google.com")

结果

注意在第一个字符串插入字符串后，我插入另一个%c格式化程序并为其赋予值background:inherit，重置后面的元素背景，使它们从控制台继承颜色在浏览器中定义了css。这是你在代码中唯一遗漏的东西。

Answer 2

我最近想解决同样的问题，并构建了一个小函数，只为我关心的关键字着色，这些关键字可以通过周围的花括号{keyword}轻松识别。

这就像一个魅力：

var text = 'some text with some {special} formatting on this {keyword} and this {keyword}'
var splitText = text.split(' ');
var cssRules = [];
var styledText = '';
for (var split of splitText)  {
    if (/^\{/.test(split)) {
        cssRules.push('color:blue');
    } else {
        cssRules.push('color:inherit')
    }
    styledText += `%c${split} `
};
console.log(styledText , ...cssRules)

Answer 3

示例：

console.log('%c\uD83D\uDE09 Giant Rainbow Text!', 
            'font-weight:bold; font-size:50px;color:red; ' +
            'text-shadow:3px 3px 0 red,6px 6px 0 orange,9px 9px 0 yellow, ' +
            '12px 12px 0 green,15px 15px 0 blue,18px 18px 0 indigo,21px 21px 0 violet');

产生：

改编自here。

另请参见console.log的{​​{3}}。