0

I have this components in my URL --

var myType="Air B&B";
var myID="RestInPeace";
var myURL="http://myhome.com?type="+myType+"&name="+myID;
alert(myURL);  //http://myhome.com?type=Air B&B&id=RestInPeace

The '&' inside myType has broken your query here:

http://myhome.com?type=Air B&B&id=RestInPeace

The page relies on the id to locate the record. It won't get it because the '&' inside the type has broke the query! Any uri sensitive characters inside myType needs to treated so it won't break the query.

Jenna Leaf
  • 2,255
  • 21
  • 29

3 Answers3

1

The best way to do this is using URL(). Create a new URL using

var myURL = new URL('http://myhome.com');

Then append search parameters like

var myType="Air B&B";
var myID="RestInPeace";
myURL.searchParams.set('type',myType);
myURL.searchParams.set('name',myID);

This will return an object like

hash: ""
host: "myhome.com"
hostname: "myhome.com"
href: "http://myhome.com/?type=Air+B%26B&name=RestInPeace"
origin: "http://myhome.com"
password: ""
pathname: "/"
port: ""
protocol: "http:"
search: "?type=Air+B%26B&name=RestInPeace"
searchParams: URLSearchParams {}
username: ""

So basically it will preserve your query automatically

Chandradeepta Laha
  • 366
  • 2
  • 7
1

Since version 1.5 (ECMA-262 3rd edition, December 1999) JavaScript supports the functions encodeURI() and encodeURIComponent() for exactly this job. I have no idea how you two guys could have overseen this.

See also the question Should I use encodeURI or encodeURIComponent for encoding URLs?

AmigoJack
  • 5,234
  • 1
  • 15
  • 31
  • It works yes and no. It works in normal circumstances. It didn't work when I pass that url to a server page for security check such as 'http://SafeWay.aspx?' + myURL. Probably my SafeWay app didn't decode those encode correctly. To quick fix for my production (for now), I just replaced those sensitive characters in one-line. – Jenna Leaf Aug 11 '20 at 15:07
  • 1
    It works 100% once one understands how HTTP URLs must look like as per [RFC 1738](https://tools.ietf.org/html/rfc1738) and which part is the path and where parameters start. A `?` should only occur once to separate all parameters - if parameters themself use `?` again it must be encoded. No magic here, only logic applied. Your example `'SafeWay.aspx?' + myURL` indicates you yet haven't understood what a parameter is and why they cannot use all characters. – AmigoJack Aug 11 '20 at 15:46
  • All it is the url with encoded parameters is a parameter itself to another url which is the safeway app. Yes it needs to be processed after the app requested it. Yes in my case encodeURIComponent works 100 % with some processing on being consumed. – Jenna Leaf Aug 11 '20 at 16:05
-1

Since the second param is not the key to load the record, I will sacrifice the '&' in the type param.

These characters will break your query in your URI : $ & : ' " < > [ ] + { }. See below the quick replace by escaping those symbols inside [] : meaning any ONE of those symbols inside []

var myType="Air B&B";
var myID="RestInPeace";
var myURL="http://myhome.com?type="+myType.replace(/[\$\&\'\"\:\<\>\[\]\{\}\+]/g, '^')+"&name="+myID;
alert(myURL);  //http://myhome.com?type=Air B^B&name=RestInPeace

Now the '&' inside myType is replaced. And the query is preserved.

http://myhome.com?type=Air B^B&name=RestInPeace

Jenna Leaf
  • 2,255
  • 21
  • 29
  • 1
    This is no solution - it continues following the wrong road. And the space in the URL isn't properly encoded either. Good luck with even more chaos once `äß` or `ゾーン` or another question mark is used as "query". – AmigoJack Feb 05 '21 at 00:18