Formatting text using JavaScript

To help format text programmatically, JavaScript exposes several default methods and a single property for which the String object commands, and all of which any text-containing variable can directly access. The below table lists them:

Formatting related properties & methods of the String object

Using the above with any string variable is simple enough- start with the variable, then dot (.), then the property/method in question to call it. Let's see this in action:

<script type="text/javascript">
//alerts the length of a string
var sitename="JavaScript Kit"
alert(sitename.length) //alerts 19
</script>

As soon as variable "sitename" contains text, it becomes more than just a mere container, but an instance of the String object, with access to all of it's goodies. And lots of goodies there are!

The syntax to using the object's methods is exactly the same. Take a look at the following, which builds up a "normal" looking text into something not, illustrating the use of these methods along the way:

var message="Welcome to our site!"
document.write(message)

Output:
Welcome to our site!

var message="Welcome to our site!"
document.write(message.toUpperCase())

Output:
WELCOME TO OUR SITE!

var message="Welcome to our site!"
document.write(message.toUpperCase().bold())

Output:
WELCOME TO OUR SITE!

var message="Welcome to our site!"
var format=message.toUpperCase()
var size=1
for (i=0;i<message.length;i++){ //go through the message, letter by letter
	document.write(format.charAt(i).fontsize(size).bold())
	if (size<7)
		size++
	else
		size=1
}

Output:

Starting to think a little differently about the usability of these String methods, are we?

Two points worth mentioning in the above. First off, notice how it is legal to append the calling of multiple methods into one line:

message.toUpperCase().bold()

Also, it's important to realize just what really goes on when we apply String methods to a piece of text- the appropriate tags simply get enclosed around it. For example, if we were to call String.bold() on "Hello", the result would be "<b>Hello</b>"...there's nothing magical that happens beyond that.With that in mind, take a look at the below, and see if you can tell why the produced text looks dramatically different than the above "ascending font size" example":

var message="Welcome to our site!"
var format=message.toUpperCase().bold()
var size=1
//go through the message, letter by letter
for (i=0;i<format.length;i++){
	document.write(format.charAt(i).fontsize(size))
	if (size<7)
		size++
	else
		size=1
}

Output:

Since String.bold() is applied to the message before any other, and the result stored in variable "format", the manipulation that follows modifies also the literal string "<b></b>", as seen in the output.

Ok, and with that we come to the end of this tutorial. As mentioned, the methods just seen represent only a subset of all of that String supports. In Part 2 of "Strings in JavaScript", I'll examine the ones dealing with the dissecting/ searching, and manipulating of text.

• Tutorial introduction
• Formatting text using JavaScript