Web Developer Tutorial: Escape Characters

By Joe Burns

I get letters now and again asking how people are able to create such great looking alert and prompt boxes, along with properly formatted text, including often used ascii characters. They also want to know how people get line breaks and double and single quotes to show up so nicely.

This also translates to any JavaScript commands that write to the page, including the document.write command. I know you've hit this wall. You write a script and you'd like to put in a single quote as in the word "you'll" or "you're". YOU know it's just a single quote but the darn JavaScript thinks it's the end of the line. Ugh! When will they build a computer that can read our minds? Is that too much to ask?

I guess it is. Until the mind-reading computers come out, using a single quote in a JavaScript line means one thing...Error!

But fear not. Learn these few simple escape characters and you'll be well on your way to putting quotes, returns, and tabs all over the JavaScript place.

The Prompt Example Using Escape Characters

Let's do the prompt first. I made it pretty small on text. Click the button to trigger the prompt to show up.

Hopefully you can scroll this page and show the code that created the text while at the same time showing the prompt box. That'll help greatly when you see the code:

var name = prompt("Please write your \'name\' in the box\r
Write it with \"quotes\" like this.","");

 

(this should be all on one line)

 

Look closely. You'll notice the single quotes were created with this: \'

The return was created with this: \r

The double quote was created with this: \"

The backslash is the key. If you plop that in front of the quotes or the letter "r" you escape the coding long enough for the script to understand you want the character to represent text rather than a command to be used in the coding. That's why we call it an escape character. Get it?

I have another similar tutorial on this topic regarding tabs. There's no real method of getting tabs in HTML. You need to use a table to get the nice columns. Well, if you use the escape character \t and write the text using a document.write method, you'll get the tabs. You can see the tutorial here.

I'll show a quick example using document.write later on in this tutorial. Now on to the Alert example.

The Alert Example Using Escape Characters

I used all four escape characters in this example. Note I sometimes used two to get a double tab or a double return. Position the scroll of the page so that the code is at the bottom and you can look at the alert box at the same time. Once you have that, click the button.

Now here's the code. This should all be written on one long line. It's probably trancating on your screen though. Just make a point of going through it piece by piece and you'll see each of the escape characters at work.

alert('OK Then!\r\rYou want a neat box like \"this\" one?\r\rWell!\r\rYou\'ll need:\rBrains\tBeauty\t\tTalent\rMoney\tDog food\t\tLuck\rA Cat\tEye of Newt\tA Shrubbery!\r\rAnd the ability to \'read\' this tutorial.\r\rOK?')

Get it?

The document.write Example Using Escape Characters

You wouldn't want to use the retun character in a document.write because it's better to literally write a BR or P tag to the page. Where these escape characters come in real handy is when you need to use a double or single quote yet you do not want to end the line. For example, the line just below this one was written with a document.write command:

Anybody else have parents that sounded like that? Mine did. It was the only sentence I could think of that had a single and double quote in it. Huh. I guess I have issues to work out. Here's the code:

<SCRIPT LANGUAGE="javascript">

document.write('We\'re going to \"need\" to know where you\'re going tonight, young man!')

</SCRIPT>

Read slowly and pick out the escape characters. Here are a few others that you may want to use at some point:

-----------------------------------
e, Acute accent      &#233;  --> é  
Ampersand            &#38;   --> &  
Registered trademark &#174;  --> ®
Copyright            &#169;  --> ©  
Trademark            &#153;  --> ™
Left Double Quote    &#8220; --> “
Right Double Quote   &#8221; --> ”
Left Single Quote    &#8216; --> ‘
Right Single Quote   &#8217; --> ’
-----------------------------------

That's That

I'll bet those little blips of information on escape characters just made someone's life a little easier. At least now we'll have less alert boxes that do not talk in contractions.

Enjoy!

 



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •