javascript - 使用 css 样式和任意参数自定义 console.log

Question

我已经检查了用于控制台的 google 开发工具 (https://developer.chrome.com/devtools/docs/console)，并且知道 '%c' 可以将 CSS 样式规则应用于输出字符串。

这是我的问题:
我想写一个函数 redLog(msg, regExp)，例如 redLog('Page1, Page2',/\d/g) 输出相同的文本和样式console.log('Page%c1%c, Page%c2%c', 'color:red', 'color:black', 'color:red', 'color:black'),但是任意的 css string('color:red', 'color:black', 'color:red', 'color:black') 给我带来麻烦。
我最近的代码片段如下(这是我第一次用英文发帖的经历，我不确定我的问题是否已经让你们明白了。):

// redLog('Page1, Page2', /\d/g)
// function as console.log('Page%c1%c, Page%c2%c', 'color:red', 'color:black', 'color:red', 'color:black')

// msg: the output string
// regExp: when any characters match the regExp, red it
function redLog(msg, regExp) {
  var cssStr = '';

  if (msg && regExp) {
    msg = msg.replace(regExp, '%c$&%c'); // '$&' inserts the matched substring.
    console.log(msg); // i cannot determine the cssStr
  }
  else {
    console.log(msg);
  }
}

Answer 1

您的问题非常复杂，因为 console.log 需要为您消息中的每个 %c 提供一个 css 字符串参数。但是由于您是动态执行的，因此您不能对 console.log 的参数进行硬编码，导致问题的原因是您需要使用数组调用 console.log争论。对于这个问题，可以使用 .apply 方法:

console.log.apply(console, args);

但要使用它，您需要为参数设置一个数组:

var args = [msg];

并用所需数量的 css 样式填充它，这有点复杂，因为您需要在消息中找到 %c 的所有外观，并在两个(如果您需要更多)之间切换想要)CSS样式:

var helpString = msg;
var toggleNextString = false;
while (helpString.indexOf("%c") != -1) {
    if (!toggleNextString) args.push(cssStrNew);
    else args.push(cssStrStandard);
    toggleNextString = !toggleNextString;
    helpString = helpString.substr(helpString.indexOf("%c") + 2);
}

注意:我为标准日志 css 和红色使用了两个字符串。

将所有这些放在一起，函数如下所示:

function redLog(msg, regExp) {
    var cssStrNew = 'color: red;';
    var cssStrStandard = 'color: black';

    if (msg && regExp) {
        msg = msg.replace(regExp, '%c$&%c');
        var args = [msg];
        var helpString = msg;
        var toggleNextString = false;
        while (helpString.indexOf("%c") != -1) {
            if (!toggleNextString) args.push(cssStrNew);
            else args.push(cssStrStandard);
            toggleNextString = !toggleNextString;
            helpString = helpString.substr(helpString.indexOf("%c") + 2);
        }
        console.log.apply(console, args);
    } else {
        msg = "%c" + msg
        console.log(msg, cssStrNew);
    }
}

这里正在工作fiddle

重要提示:%c 不适用于所有浏览器(对于 Firefox，您可以使用 Firebug)(afaik)