JavaScript Does Not Escape "+" And ColdFusion Does Not Like This One Bit
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:
Here is the URL 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?
Want to use code from this post? Check out the license.
Reader Comments
Instead of escape() try using encodeURIComponent(). That is part of JavaScript 1.5/ECMAScript 3 standard, and escapes special symbols and does utf8 properly. See docs:
http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Functions:encodeURIComponent
Ha ha, yeah, I just came across that one as well. Looks like I have to brush up on my 1.5 Javascript.
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!
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...
@Julian,
Glad to help out.
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.
Thanx a ton, Ben and Erki.. u guys saved me hours of embarrasment.. :)
@Anirban,
No problem - also, don't forget to check out the follow up post to this which talks about the function, encodeURIComponent():
www.bennadel.com/blog/564-JavaScript-encodeURIComponent-Escapes-Symbol.htm
It makes this post less relevant (and your life easier!).