Formatting text in JavaScript

JavaScript provides number of predefined functions (methods) to format some text. The methods we are about to discuss are:

  1. bold () – makes text bold using the HTML <b> tag.
  2. italics () – italicizes text using the HTML <i> tag.
  3. fontcolor () – changes the color of the text to the specified color as an argument. The fontcolor () method uses the HTML <font> tag with the color attribute.
  4. fontsize () – changes the size of the text to the specified size as an argument. The fontcolor () method uses the HTML <font> tag with the size attribute.
  5. toLowerCase () – changes text to all lowercase letters.
  6. toUpperCase () – changes text to all upper case letters.

From other examples presented on this site about JavaScript, you should know how to call (use) a JavaScript method. We simply call the method with object it belongs to. The methods shown above are part of a string object. The following shows the JavaScript code how to use the above mentioned text formatting methods ():

<script language="javascript">
var str = "Learn JavaScript with easy examples!";
document.write ("Original text: " + str);
document.write ("<br>Changed to bold: " + str.bold());
document.write ("<br>Changed to italics: " + str.italics());
document.write ("<br>Changed color: " + str.fontcolor("DarkGreen")); // could also use the Hexadecimal value: #006400
document.write ("<br>Changed size: " + str.fontsize("2")); // possible values 1 through 7
document.write ("<br>In lowercase: " + str.toLowerCase());
document.write ("<br>In upper case: " + str.toUpperCase());
</script>

Let's discuss what the above JavaScript code does. We start with string variable. Line 3 displays the value of the variable. Line 4 prints our string as bold because of the bold () method being used with string object. Similarly, we call the other methods and pass arguments, when appropriate, inside the parentheses. The following shows the output of the above JavaScript code:

Just like in HTML we can use more than one tag to format a text, we can multiple methods on the same string object. For instance, in HTML if you wanted to display some text as bold, dark green and in bigger font size, you could use the <b> tag, <font> tag to adjust the color and size; respectively. See the following HTML code:

<font size="6" color="#006400">
<b>Formatting some text.</b>
</font>

for

Formatting some text.

To produce the above shown output, notice our HTML code does not say:

<font size="6">
<font color="#006400">
<b>Formatting some text.</b>
</font>
</font>

This code uses two font tags instead of one yet the output of our code is unaffected. You may notice that this is long and is less efficient way of coding. By the same token, we want to avoid that in JavaScript. See the same example in JavaScript:

<script language="javascript">
var str = "Formatting some text.";
str = str.fontsize("6"); // sets size of the text to 6
str = str.fontcolor("#006400"); // sets color of the text to #006400
str = str.bold(); // makes text bold
document.write (str);
</script>

We create our string variable on line 2. Line 3 uses the fontsize () method to set the font size of this string to 6. Line 4 sets the color and line 5 makes the text bold. Finally, line 6 prints out result. Notice each time we make a change to the str variable, we assign the value to itself using the assignment operator.

The following JavaScript code is more concise and efficient to accomplish the same:

<script language="javascript">
var str = "Formatting some text.";
str = str.fontsize("6").fontcolor("#006400").bold();
document.write (str);
</script>

Notice on line 3 we are using three methods with the string object called str. We separate each method with a dot (specifically with dot operator). Notice the formatted string result is the same whether you use one method at a time or multiple methods in one step: