How do I pass a URL with multiple parameters into a URL?

Question

Basically I'm trying to pass a URL like this:

www.foobar.com/?first=1&second=12&third=5

into a URL like this:

http://www.facebook.com/sharer.php?&t=FOOBAR&u=http://www.foobar.com/first=12&amp;sec=25&amp;position=2

It only recognizes the first parameter. I'm having the same problem with LinkedIn and Twitter sharing, so it must be something I'm doing wrong.

score 92 · Accepted Answer · edited May 23 '17 at 12:10

92

Rather than html encoding your URL parameter, you need to URL encode it:

http://www.facebook.com/sharer.php?&t=FOOBAR&u=http%3A%2F%2Fwww.foobar.com%2F%3Ffirst%3D12%26sec%3D25%26position%3D

You can do this easily in most languages - in javascript:

var encodedParam = encodeURIComponent('www.foobar.com/?first=1&second=12&third=5');
// encodedParam = 'http%3A%2F%2Fwww.foobar.com%2F%3Ffirst%3D12%26sec%3D25%26position%3D'

(there are equivalent methods in other languages too)

edited May 23 '17 at 12:10

Community

1
1

answered Feb 23 '11 at 19:21

Dexter

18,213
4
44
54

Wouldn't you need to encode each param in the query string as well in case it had funky characters? – Kevin Ghadyani Aug 27 '18 at 21:02
In my answer, I have assumed that the value for the URL is already valid / properly constructed before you encode it to pass as a param. The method above will work fine even if the URL is not valid - but of course you may not be able to use it effectively at the other end if it’s not – Dexter Aug 28 '18 at 22:39

Sean Vieira · Answer 2 · 2011-02-23T19:25:30.587

13

You are missing the ? in the second URL (Also, it should be URL-encoded to be %3F).

Also, I believe that the remaining & need to be URL, not HTML-encoded. Change &second=12&third=5 to %26second=12%26third=5 and everything should just work.

This:

&u=http://www.foobar.com/first=12&amp;sec=25&amp;position=2

should be:

&u=http://www.foobar.com/%3Ffirst=12%26sec=25%26position=2

edited Feb 23 '11 at 19:25

answered Feb 23 '11 at 19:20

Sean Vieira

155,703
32
311
293

Also may need to encode the colon and forward slashes in the URL. – justkt Feb 23 '11 at 19:23
@DormoTheNord -- `%31` was a mistake ... should have been `%3F`. – Sean Vieira Feb 23 '11 at 19:26
2

@Ferdinand - I think you want `encodeURIComponent`, which encodes all URL characters. `encodeURI` doesn't encode characters such as : and /. – justkt Feb 23 '11 at 19:27
Sorry about that, it was a typo. I'm using encodeURIComponent – DormoTheNord Feb 23 '11 at 19:30
@justkt: Yes, you are right. Actually, I meant `escape()` instead of `encode()`, but `encodeURIComponent()` might be better. – Ferdinand Beyer Feb 24 '11 at 09:08

score 2 · Answer 3 · edited Mar 29 '19 at 14:50

2

In jQuery, you can use:

let myObject = {first:1, second:12, third:5};
jQuery.param(myObject);

Doc: http://api.jquery.com/jquery.param/ The output: first=1&second=12&third=5 This will format it, whatever your object contain.

edited Mar 29 '19 at 14:50

Clemens Tolboom

1,872
18
30

answered Jun 02 '16 at 10:08

SSL46

29
3

score 2 · Answer 4 · answered Feb 23 '11 at 19:21

In your example parts of your passed-in URL are not URL encoded (for example the colon should be %3A, the forward slashes should be %2F). It looks like you have encoded the parameters to your parameter URL, but not the parameter URL itself. Try encoding it as well. You can use encodeURIComponent.

score 0 · Answer 5 · edited Jun 20 '20 at 09:12

I see you're having issues with the social share links. I had a similar issue at some point and found this question, but I don't see a complete answer for it. I hope my javascript resolution from below will help:

I had default sharing links that needed to be modified so that the URL that's being shared will have additional UTM parameters concatenated.

My example will be for the Facebook social share link, but it works for all the possible social sharing network links:

The URL that needed to be shared was:

https://mywebsitesite.com/blog/post-name

The default sharing link looked like:

$facebook_default = "https://www.facebook.com/sharer.php?u=https%3A%2F%2mywebsitesite.com%2Fblog%2Fpost-name%2F&t=hello"

I first DECODED it:

console.log( decodeURIComponent($facebook_default) );
=>
https://www.facebook.com/sharer.php?u=https://mywebsitesite.com/blog/post-name/&t=hello

Then I replaced the URL with the encoded new URL (with the UTM parameters concatenated):

console.log( decodeURIComponent($facebook_default).replace( window.location.href, encodeURIComponent(window.location.href+'?utm_medium=social&utm_source=facebook')) );

=>

https://www.facebook.com/sharer.php?u=https%3A%2F%mywebsitesite.com%2Fblog%2Fpost-name%2F%3Futm_medium%3Dsocial%26utm_source%3Dfacebook&t=2018

That's it!

Complete solution:

$facebook_default = $('a.facebook_default_link').attr('href');

$('a.facebook_default_link').attr( 'href', decodeURIComponent($facebook_default).replace( window.location.href, encodeURIComponent(window.location.href+'?utm_medium=social&utm_source=facebook')) );

TABISH · Answer 6 · 2023-07-13T13:44:47.267

Build URL passing search parameters in JavaScript

Construct URL without parameters

const apiEndPoint = new URL('https://geocode.maps.co/reverse);

Organise parameters in object form

const parameters = {
    lat: 52.508,
    lon: 13.381
}

Construct search parameters from object

const searchParams = new URLSearchParams(parameters)

Add search parameters to URL

apiEndPoint.search = searchParams

Final URL

const finalURL = apiEndPoint.toString()

Print completed URL on console

console.log(finalURL)

[Log] https://geocode.maps.co/reverse?lat=52.508&lon=13.381

score -7 · Answer 7 · edited Nov 08 '12 at 18:02

-7

You have to escape the & character. Turn your

into

&amp;

and you should be good.

edited Nov 08 '12 at 18:02

Scott Stafford

43,764
28
129
177

answered Feb 23 '11 at 19:20

jonezy

1,903
13
21

2

Web servers don't know HTML entities, the character has to be URI-encoded instead. – Ferdinand Beyer Feb 23 '11 at 19:23
I tried &amps; and it didn't work. I needed %31. Now I'm just using Javascript's encode() function. ^_^ – DormoTheNord Feb 23 '11 at 19:25
The entity is called &, not &amps; -- he was pluralizing it for English purposes.. ;) I edited to be clearer. But the %31 is better anyway. – Scott Stafford Nov 08 '12 at 18:02
Actually it should be %26 to escape &. – Ahmed Azraq Aug 04 '14 at 08:14
Maybe it's time to delete this answer :) – Jose Manuel Abarca Rodríguez Aug 17 '17 at 16:09

How do I pass a URL with multiple parameters into a URL?

7 Answers7

Linked

Related