Prevent url encoding in AngularJS route

Question

Currently, when I pass my query string into the search() method of $location, my query string is uri encoded

Example

$location.path('/some_path').search({'ids[]': 1})

becomes

http://some_url/some_path?ids%5B%5D=1

I wonder if there's a way to get around this?

I want to have the param name semantically defined instead of using something like a comma separated list. — trivektor
– trivektor, Commented Jan 31, 2014 at 6:40
There is a way around this, but the more important question is, should you? Special characters should be encoded in a URL. If you don't want to show it's 'ugliness' use a post instead of a get. — J_A_X
– J_A_X, Commented Apr 29, 2014 at 5:49
What is your reason for this? Even if you come up with one good one, there's a million others that oppose it. Regardless of how AngularJS encodes the URL, when $location.search() is called it un-encodes the URL back into your original object. At this point, the only reason for doing what you're trying to do is to make the URL look prettier in the browser. — Mike Quinlan
– Mike Quinlan, Commented Apr 30, 2014 at 18:25
possible duplicate of AngularJS: avoid url encoding with $location — Tony
– Tony, Commented Apr 23, 2015 at 21:36

dimirc · Accepted Answer · 2014-01-31 07:45:53Z

The problem is that .search() uses encodeUriQuery that internally uses encodeURIComponent and this function escapes all characters except the following: alphabetic, decimal digits, - _ . ! ~ * ' ( )

The current function inside Angular's source code:

/**
 * This method is intended for encoding *key* or *value* parts of query component. We need a custom
 * method because encodeURIComponent is too aggressive and encodes stuff that doesn't have to be
 * encoded per http://tools.ietf.org/html/rfc3986:
 *    query       = *( pchar / "/" / "?" )
 *    pchar         = unreserved / pct-encoded / sub-delims / ":" / "@"
 *    unreserved    = ALPHA / DIGIT / "-" / "." / "_" / "~"
 *    pct-encoded   = "%" HEXDIG HEXDIG
 *    sub-delims    = "!" / "$" / "&" / "'" / "(" / ")"
 *                     / "*" / "+" / "," / ";" / "="
 */
function encodeUriQuery(val, pctEncodeSpaces) {
  return encodeURIComponent(val).
             replace(/%40/gi, '@').
             replace(/%3A/gi, ':').
             replace(/%24/g, '$').
             replace(/%2C/gi, ',').
             replace(/%20/g, (pctEncodeSpaces ? '%20' : '+'));
}

If that function had this additional replaces, then the brackets will keep unencoded:

replace(/%5B/gi, '[').
replace(/%5D/gi, ']').

Collectives™ on Stack Overflow

Prevent url encoding in AngularJS route

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related