JavaScript: Escaping Special Characters

Every programming language has it's special characters - characters that mean something special such as identifying a variable, the end of a line or a break in some data. JavaScript is no different, so it provides a number of functions that encode and decode special characters.

If you're interacting between PHP and JavaScript you will also need to be familiar with the PHP functions for encoding and decoding special characters, which is why we've created this special tool for testing and comparing different functions.

Encoding and decoding using JavaScript and PHP

The form below let's you see the output of various functions that are used to encode special characters when they appear in plain text or URL parameters (following the '?' in a URL). This page calls the PHP functions directly using Ajax rather than a JavaScript emulation. If you have a string to decode, use the buttons on the right instead.

These functions perform replacements on certain characters as shown in the table futher down the page and described briefly here:

• The JavaScript escape function replaces most punctuation symbols with the equivalent hex-codes, but was found to be inadequate when it came to UNICODE character encoding and has been superseded by the encodeURI function.
• The encodeURIComponent function is an extension of encodeURI, the difference being that it also escapes the following characters: , / ? : @ & = + $
• On the PHP side of things, the only difference beween urlencode and rawurlencode is that the latter escapes the <space> character wheras urlencode uses the widely accepted + instead.
• The htmlentities function escapes characters which have special meaning inside HTML by inserting HTML entities in their place (eg. &amp; in place of &). See our article on ASCII Character Codes for more details.
• All functions have a complementary 'decode' function that pretty much does the opposite.

Escaping Double and Single Quotes

Another essential PHP function that comes in handy when passing data to JavaScript is addslashes which will add a backslash before: backslashes, single- and double-quotes.

For example, to echo a PHP variable into JavaScript code:

In the HTML we use double-quotes and in the JavaScript single-quotes, so any quotes within the JavaScript code will need to be escaped so that they don't conflict with either the HTML or JavaScript quotes.

For more details on escaping PHP variables for use in JavaScript see our related article: Passing PHP variables to JavaScript.

Table of encoded characters

Here you can see how the various JavaScript and PHP functions apply to a range of common characters.

The RFC 1738 specifications make fascinating reading - considering that the document is 10 years old yet still applicable.

Related Articles

• HTML: ASCII Character Codes
• PHP: Passing variables to JavaScript

References

• Core JavaScript Guide 1.5: Functions
• Escaping JavaScript for PHP

< Back to JavaScript

Feedback and Questions

2007-04-26: Praveen (Cognizant Technologies Solutions) says:

When user copies the data from microsoft word to my PHP application this often inserts unidentified characters. Is there a permant solutions for this?

Not if they insist on using Word. The problem is that Word uses it's own Character Set which uses characters that aren't compatible with a lot of websites or databases.

You can improve things slightly by disabling all "AutoCorrect" and "AutoReplace" features in Word which will fix a lot of problems with quotes, dashes and list markers, but beyond that things can get complicated.

2008-01-12: Linda Fahlberg-Stojanovska says:

THANK-YOU!!! I needed this table for my pmwiki and finally found it here and so beautifully organized.

2008-03-24: godlike says:

very helpful page. Maybe you should add an encoding option so we can test the funcs with different encodings.

That's a great idea, but I'm still a bit clueless when it comes to encoding - everything we do is locked down as UTF-8. If I could just work out where to start...

2008-09-21: Daniel Topp (TNI The Network Inc.) says:

I noticed that the percent sign % doesn't properly decode in javascript. It will encode to %25, but gives a javascript error when trying to decode. Were you aware of this bug and are there any known fixes?

The definition of the decodeURI function is that it "decodes a Uniform Resource Identifier (URI) previously created by encodeURI or by a similar routine" and "does not decode escape sequences that could not have been introduced by encodeURI". You will need to use a different function, or write your own, if your string is not already properly encoded.