In this article, we will learn how to add colors to text and print them in a console window in JavaScript. In the original version, all the data printed in the console was black and no other colors were reflected in the console, but here we will add some special characters with text to make our console window look more colorful .

There are special codes that can help change the color of the output in the console window, these codes are called ANSI escape codes. By adding these codes in the console.log() method, we can see multiple colors in the output.

The special codes for all colors are as follows -

black = "\x1b[30m" red = "\x1b[31m" green = "\x1b[32m" yellow = "\x1b[33m" blue = "\x1b[34m" magenta = "\x1b[35m" cyan = "\x1b[36m" white = "\x1b[37m"

To achieve the task of adding colored text to the console window, we need to create an object first, and then add the color name and its name to the object. A key-value pair of codes, i.e. the color name as the key and the color as the color code as the value for the specific key. After adding the key-value pairs, we need to print these key-value pairs using a for loop.

Syntax

const color = {}; color.black ="\x1b[30m"; color.red = "\x1b[31m"; color.green = "\x1b[32m"; color.yellow = "\x1b[33m"; color.blue = "\x1b[34m"; color.magenta = "\x1b[35m"; color.cyan = "\x1b[36m"; color.white = "\x1b[37m"; for (var key in color){ console.log( color[key] + key); }

Example

Print colored text in console

In the following example, we print colored text in console. Please open theConsolefirst, and then click the"Colored Text"button.

    
 JavaScript console colored text 
 
 Please open the Console to see the colored text.  
 Click "Colored Text" to display colored text in the Console.
 Colored Text    

Here you can see that in the for loop we printed the value first and then the key because to print colored text you have to put the color code before the actual text.

Note- We have the color code for the text, similarly we have the color code for the background text, we can use them if we want a colored background in the console window. The color code for background color is as follows -

bgBlack = "\x1b[40m" bgRed = "\x1b[41m" bgGreen = "\x1b[42m" bgYellow = "\x1b[43m" bgBlue = "\x1b[44m" bgMagenta = "\x1b[45m" bgCyan = "\x1b[46m" bgWhite = "\x1b[47m"

Example

Set text background color in console

In the following example, we set text background color in console. Before executing the program, make sure you have theConsoleopen.

    
 JavaScript console colored text background 
 
 Please open the "Console" to see the colored text background. 
 
 Click "Colored Text" to display colored text background in the Console.
 Colored Text    

The above is the detailed content of How to print colored text in console using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!