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

Question

问题

我编写了一个函数来演示如何以多种方式格式化 Chrome 开发人员控制台 console.log() 消息。但是，我遇到的问题是在左侧打印一个带有配色方案的变量，然后在中间打印一个没有样式的字符串，然后是另一个已设置样式的变量。这里有一张图来说明：

此外，此 HTML/CSS 代码将演示我试图在开发人员控制台中生成的内容：

    <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>

我试过但没有用

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() 的格式允许在同一行中显示格式化和未格式化的文本，您必须 "reset" 您在格式化 css 之后更改的 css =38=]。例如，要使日志显示格式如下面的代码

<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。

另见 documentation console.log。

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

Format console.log with color and variables surrounding non-formatted text

javascript

css

google-chrome

firebug

console.log

问题

我试过但没有用

我的问题

代码

结果

示例：

生产：