Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at Hal Helms' Real World OO (Feb. 2009) with: Steve Good and Joakim Marner and Charlie Griefer

JavaScript Does Not Escape "+" And ColdFusion Does Not Like This One Bit

By Ben Nadel on

I have been working on a mini AJAX and ColdFusion powered Chat application so that I can help people debug their code in a real-time way. One bug that has popped up early on is that "+" symbols are getting lost. From what I narrowed down, the "+" is not even making it into the database. The error is on the way In, not the way Out.

After some debugging, I found this page on the Javascript Escape() method, which is what I use to build the URL for AJAX submission:

http://www.w3schools.com/jsref/jsref_escape.asp

It states that the Javascript Escape() method does NOT escape the "+" symbol. Ok, no problem, right? I mean the "+" isn't really a meaningful URL value as far as I know (URL uses the "&" to separate parameters). Wrong! The "+" symbol represents an encoded space " " in a URL. This is something that ought to be escaped by Javascript. I wonder why they made that decision.

Here is a demo. I created a simple page that took one URL parameter with a "+" symbol and then I dump out the URL structure. Here is the URL:


 
 
 

 
URL value with embedded + symbol  
 
 
 

Here is the URL struct:


 
 
 

 
URL with embedded plus symbol removed in struct  
 
 
 

As you can see, the "+" is getting stripped out of the URL message parameter. It looks like, coming from Javascript, I am going to have escape my "+" symbols manually. In order to do this, I am going to have to replace the "+" with its HEX equivalent, "%2B" after I have escaped the other values:

  • // Escape the URL parameters for this AJAX url request.
  • escape(
  • objParams[ strKey ]
  •  
  • // Escape the "+" manually.
  • ).replace(
  • new RegExp( "\\+", "g" ),
  • "%2B"
  • )

Doing this and the "+" symbol work just fine. I am very curious as to why Javascript treats the "+" symbol as something special, not to be escaped (when it clearly has a very special URL representation that shouldn't be confused). Any thoughts?




Reader Comments

Ha ha, yeah, I just came across that one as well. Looks like I have to brush up on my 1.5 Javascript.

Reply to this Comment

Ben, I read your blog regularly and found this on the web when searching for a chat client for a site that i'm working on. I like the idea and will read the post later when I get back. One thing I want to recommend is the form serializer from http://www.massimocorner.com. I have used some of Massimo's stuff in the past and his code is super clean and elegant, you may want to give that a look.

I tried to chat by clicking on the link and for some reason the cursor kept losing focus. I literally had one hand on the mouse and kept clicking back in and the other to type with.

Not sure if you knew about that little bug.

Look forward to talking to you soon!

Reply to this Comment

Thanks heaps for this post, I nailed an issue with UTF8 characters in my web system development that had lingered for years.

Testiment to the value of blogging...

Reply to this Comment

Ben,

Thanks for the post, finally got Google to give me the result I wanted.

How annoying this is and I came across this due to an email address.

Reply to this Comment

Post A Comment

?
You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.