String manipulation is an important part of JavaScript programming, and having recently been reminded that I have yet to write a tutorial on it, this one comes as long overdue. In Part 1 of "Strings In JavaScript", I'll discuss how to format the look of a string using the language, such as make it bold, convert it to uppercase etc.
The String object
Before we officially proceed, it's important to realize the existence of a String Object in JavaScript, and how it is created- whenever a variable contains text. Take the following as an example:
var sitename="JavaScript Kit"
In the above, "sitename" is not only a variable, but an instance of the String object as well.
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
| Property | Description |
|---|---|
| length | Returns the total number of characters of a string. |
| Methods | Description |
|---|---|
| anchor(name) | Returns the string with the tag <A name="name"> surrounding it. |
| big() | Returns the string with the tag <BIG> surrounding it. |
| blink() | Returns the string with the tag <BLINK> surrounding it. |
| bold() | Returns the string with the tag <B> surrounding it. |
| fixed() | Returns the string with the tag <TT> surrounding it. |
| fontcolor(color) | Returns the string with the tag <FONT color="color"> surrounding it. . |
| fontsize(size) | Returns the string with the tag <FONT size="size"> surrounding it. |
| italics() | Returns the string with the tag <I> surrounding it. |
| link(url) | Returns the string with the tag <A href="url"> surrounding it. |
| small() | Returns the string with the tag <SMALL> surrounding it. |
| strike() | Returns the string with the tag <STRIKE> surrounding it. |
| sub() | Returns the string with the tag <SUB> surrounding it. |
| sup() | Returns the string with the tag <SUP> surrounding it. |
| toLowerCase() | Returns the string with all of its characters converted to lowercase. |
| toUpperCase() | Returns the string with all of its characters converted to uppercase. |
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" //alerts 19 alert(sitename.length) </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
//go through the message, letter by letter
for (i=0;i<message.length;i++){
document.write(format.charAt(i).fontsize(size).bold())
if (size<7)
size++
else
size=1
}Output:
WELCOME TO OUR SITE!
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:
<B>WELCOME TO OUR SITE!</B>
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.
discuss this topic to forum
