javascript - 使用围绕非格式化文本的颜色和变量格式化 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()要进行格式化以使其允许在同一行中有格式化和未格式化的文本，您必须“重置”您在格式化 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 继承颜色。这是您的代码中唯一缺少的东西。