Dar formato a console.log con color y variables alrededor del texto sin formato

Posteriormente a consultar con expertos en la materia, programadores de deferentes ramas y profesores hemos dado con la solución al problema y la dejamos plasmada en este post.

Solución:

Para obtener console.log() para ser formateado de tal manera que permita texto con formato y sin formato en la misma línea, debe “restablecer” el css que cambió siguiendo el css formateado. Por ejemplo, para que el registro se muestre con el formato del siguiente código

Array[index0] = http://www.google.com

Necesitaría que su llamada a console.log() se vea así:

Código

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

Resultado

Observe cómo después de la primera string se inserta en el stringinserto otro %c formateador y darle el valor de background:inherit que restablece los fondos de los elementos después de hacerlos heredar el color del css definido de la consola en el navegador. Eso era lo único que le faltaba a su código.

Hace poco quise resolver el mismo problema y construí una pequeña función para colorear solo las palabras clave que me importaban y que eran fácilmente identificables al rodearlas con llaves. keyword.

Esto funcionó a las mil maravillas:

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)

Nos puedes corroborar nuestra ocupación exponiendo un comentario y dejando una puntuación te lo agradecemos.

---

---

Utiliza Nuestro Buscador