search

Home  >  Article  >  Web Front-end  >  How to print colored text in console using JavaScript?

How to print colored text in console using JavaScript?

WBOY
WBOYforward
2023-09-24 16:09:051549browse

如何使用 JavaScript 在控制台中打印彩色文本？

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 the Console first, and then click the "Colored Text" button. 

<!DOCTYPE html>
<html>
<body>
   <center>
   <h1> JavaScript console colored text </h1>
   <p> Please open the <b>Console</b> to see the colored text. </h4>
   <p> Click "Colored Text" to display colored text in the Console.</p>
   <button onclick="colorFunc()">Colored Text</button>
   </center>
   <script>
      function colorFunc() {
         const color = {};

         // Assigning the key: value pair to an object
         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";

         // To print the key-value pairs of the object
         for (var key in color) {
            console.log(color[key] + key);
         }
      }
   </script>
</body>
</html>

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 the Console open. 

<!DOCTYPE html>
<html>
<body>
   <center>
   <h2> JavaScript console colored text background </h2>
   <p> Please open the <b>"Console"</b> to see the colored text background. </p>
   <p> Click "Colored Text" to display colored text background in the Console.</p>
   <button onclick="colorFunc()">Colored Text</button>
   </center>
   <script>
      function colorFunc() {
         const color = {};

         // Assigning the key: value pair to an object
         color.bgBlack = "\x1b[40m"
         color.bgRed = "\x1b[41m"
         color.bgGreen = "\x1b[42m"
         color.bgYellow = "\x1b[43m"
         color.bgBlue = "\x1b[44m"
         color.bgMagenta = "\x1b[45m"
         color.bgCyan = "\x1b[46m"
         color.bgWhite = "\x1b[47m"

         // To print the key-value pairs of the object
         for (var key in color) {
            console.log(color[key] + key);
         }
      }
      colorFunc()
   </script>
</body>
</html>

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!

JavaScript for 循环 console 对象
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to run a given array of Promises continuously in JavaScript?Next article：How to run a given array of Promises continuously in JavaScript?

Related articles

See more