Use + instead of %20 to encode spaces in URLs

Author: mjackson

modules/helpers/Path.js

@@ -1,6 +1,8 @@
 var invariant = require('react/lib/invariant');
 var merge = require('react/lib/merge');
 var qs = require('querystring');
+var urlDecode = require('./urlDecode');
+var urlEncode = require('./urlEncode');
 
 var paramMatcher = /((?::[a-z_$][a-z0-9_$]*)|\*)/ig;
 var queryMatcher = /\?(.+)/;
@@ -41,14 +43,14 @@ var Path = {
    */
   extractParams: function (pattern, path) {
     if (!isDynamicPattern(pattern)) {
-      if (pattern === decodeURIComponent(path))
+      if (pattern === urlDecode(path))
         return {}; // No dynamic segments, but the paths match.
 
       return null;
     }
 
     var compiled = compilePattern(pattern);
-    var match = decodeURIComponent(path).match(compiled.matcher);
+    var match = urlDecode(path).match(compiled.matcher);
 
     if (!match)
       return null;
@@ -87,7 +89,7 @@ var Path = {
         'Missing "' + paramName + '" parameter for path "' + pattern + '"'
       );
 
-      return encodeURIComponent(params[paramName]);
+      return urlEncode(params[paramName]);
     });
   },
 

modules/helpers/urlDecode.js

@@ -0,0 +1,11 @@
+/** This function was copied from the https://github.com/cujojs/rest source, MIT licensed */
+
+var urlEncodedSpaceRE = /\+/g;
+
+function urlDecode(str) {
+  // spec says space should be encoded as '+'
+  str = str.replace(urlEncodedSpaceRE, ' ');
+  return decodeURIComponent(str);
+}
+
+module.exports = urlDecode;

modules/helpers/urlEncode.js

@@ -0,0 +1,11 @@
+/** This function was copied from the https://github.com/cujojs/rest source, MIT licensed */
+
+var encodedSpaceRE = /%20/g;
+
+function urlEncode(str) {
+  str = encodeURIComponent(str);
+  // spec says space should be encoded as '+'
+  return str.replace(encodedSpaceRE, '+');
+}
+
+module.exports = urlEncode;

specs/Path.spec.js

@@ -39,13 +39,13 @@ describe('Path.extractParams', function () {
 
     describe('and the path matches', function () {
       it('returns an empty object', function () {
-        expect(Path.extractParams(pattern, 'one%2C%20two')).toEqual({});
+        expect(Path.extractParams(pattern, 'one%2C+two')).toEqual({});
       });
     });
 
     describe('and the path does not match', function () {
       it('returns null', function () {
-        expect(Path.extractParams(pattern, 'one%20two')).toBe(null);
+        expect(Path.extractParams(pattern, 'one+two')).toBe(null);
       });
     });
   });
@@ -55,7 +55,7 @@ describe('Path.extractParams', function () {
 
     describe('and the path matches', function () {
       it('returns an object with the params', function () {
-        expect(Path.extractParams(pattern, '/comments/abc/edit%20now')).toEqual({ id: 'abc' });
+        expect(Path.extractParams(pattern, '/comments/abc/edit+now')).toEqual({ id: 'abc' });
       });
     });
 
@@ -131,7 +131,7 @@ describe('Path.injectParams', function () {
 
     describe('and some params have special URL encoding', function () {
       it('returns the correct path', function () {
-        expect(Path.injectParams(pattern, { id: 'one, two' })).toEqual('comments/one%2C%20two/edit');
+        expect(Path.injectParams(pattern, { id: 'one, two' })).toEqual('comments/one%2C+two/edit');
       });
     });
   });