The purpose of this article is to add special characters to text to print in color in the console in JavaScript.
Approach: The ANSI escape codes help change/specify the color of the output in the console. The color of the output of the console can be changed by adding these escape codes just before the actual text.Â
Syntax:Â
/*Codes for different Colors*/ black = "\x1b[30m" red = "\x1b[31m" green = "\x1b[32m" yellow = "\x1b[33m" blue = "\x1b[34m" magenta = "\x1b[35m" cyan = "\x1b[36m" white = "\x1b[37m"
Example :Â
Javascript
<script> Â Â console.log("\x1b[31m"+ "Red"); Â Â console.log("\x1b[32m"+ "Green"); Â Â console.log("\x1b[35m"+ "Magenta"); </script> |
Output:
Note: The above task can be simplified by adding a custom helper function in the script which can be invoked with the color and data to be displayed in the console.
Example: The following is the JavaScript code for performing the task using a custom helper function.
Javascript
<script> function colorHelper(color,data) {Â Â Â Â Â Â Â /* function receives 2 arguments color and data*/Â Â Â const black = "\x1b[30m";Â Â Â Â Â const red = "\x1b[31m"; Â Â Â const green = "\x1b[32m"; Â Â Â const yellow = "\x1b[33m"; Â Â Â const blue = "\x1b[34m"; Â Â Â const magenta = "\x1b[35m"; Â Â Â const cyan = "\x1b[36m"; Â Â Â const white = "\x1b[37m"; Â Â Â const arr=[]; Â Â Â Â Â /* Storing the color codes in Array */Â Â Â arr[0] = black;Â Â Â Â Â arr[1] = red; Â Â Â arr[2] = green; Â Â Â arr[3] = yellow; Â Â Â arr[4] = blue; Â Â Â arr[5] = magenta; Â Â Â arr[6] = cyan; Â Â Â arr[7] = white; Â Â Â console.log(arr[color]+data); } Â Â /* colorHelper function called with color and data */colorHelper(1,"I am Red");Â Â colorHelper(2,"I am Green"); colorHelper(5,"I am Magenta"); </script> |
Output:Â
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
… [Trackback]
[…] There you can find 68757 more Info on that Topic: geeksforgeeks.org/how-to-add-special-characters-to-text-to-print-in-color-in-the-console-in-javascript-2/ […]