URLパラメータをエンコードする方法は？

次のようなURLにパラメーターを渡そうとしています。

http://www.foobar.com/foo?imageurl=

そして、私は別のAPIによってそれ自体が生成した画像URLなどのパラメーターを渡したいのですが、画像のリンクは次のようになります：

http://www.image.com/?username=unknown&password=unknown

ただし、次のURLを使用しようとすると、

http://www.foobar.com/foo?imageurl=http://www.image.com/?username=unknown&password=unknown

動かない。

私も使って試してみましたencodeURI()とencodeURIComponent()imageURLにに、そしてあまりにも動作しないこと。

PHPを使用

echo urlencode("http://www.image.com/?username=unknown&password=unknown");

結果

http%3A%2F%2Fwww.image.com%2F%3Fusername%3Dunknown%26password%3Dunknown

JavaScriptを使用：

var myUrl = "http://www.image.com/?username=unknown&password=unknown";
var encodedURL= "http://www.foobar.com/foo?imageurl=" + encodeURIComponent(myUrl);

デモ：http : //jsfiddle.net/Lpv53/

新しいES6を使用Object.entries()すると、楽しい入れ子になったmap/になりjoinます。

const encodeGetParams = p => 
  Object.entries(p).map(kv => kv.map(encodeURIComponent).join("=")).join("&");

const params = {
  user: "María Rodríguez",
  awesome: true,
  awesomeness: 64,
  "ZOMG+&=*(": "*^%*GMOZ"
};

console.log("https://example.com/endpoint?" + encodeGetParams(params))

encodeURIComponent()またはを使用しないでくださいencodeURI()。あなたは使うべきですfixedEncodeURIComponent()とfixedEncodeURI()MDNのマニュアルによると、。

について encodeURI() ...

URLの最新のRFC3986に従い、角かっこが予約され（IPv6の場合）、URLの一部となる可能性があるもの（ホストなど）を形成するときにエンコードされない場合は、次のコードスニペットが役立ちます。

function fixedEncodeURI(str) { return encodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']'); }

について encodeURIComponent() ...

RFC 3986（！、 '、（、）、および*を予約する）を厳守するために、これらの文字に正式なURI区切りの使用法がない場合でも、以下を安全に使用できます。

function fixedEncodeURIComponent(str) { return encodeURIComponent(str).replace(/[!'()*]/g, function(c) { return '%' + c.charCodeAt(0).toString(16); }); }

それで、違いは何ですか？ fixedEncodeURI()そして、fixedEncodeURIComponent()同じ値のセットを変換しますが、fixedEncodeURIComponent()このセットを変換します+@?=:*#;,$&。このセットは、で使用されるGETパラメータ（&、+等）、アンカータグ（#）、ワイルドカードタグ（*）、電子メール/ユーザ名部品（@）、など。

たとえば-あなたが使用している場合はencodeURI()、user@example.com/?email=me@home正しく秒を送信しません@互換性を扱うお使いのブラウザ（Chromeは自然にしばしばそうであるよう）を除いて、サーバに。