I want to manually construct URL from parts using the URL object.

However, it's constructor requires a proper URL string to be passed to it, which doesn't allow to start from empty object and build it progressively.

1. Is there a way to overe this limitation somehow?
2. What caused such design decision in the first place?

I want to manually construct URL from parts using the URL object.

However, it's constructor requires a proper URL string to be passed to it, which doesn't allow to start from empty object and build it progressively.

1. Is there a way to overe this limitation somehow?
2. What caused such design decision in the first place?

• javascript
• url

• Why exactly do you need to use a URL object? Is it to extract the protocol, host etc? – Nick Parsons Commented Apr 26, 2019 at 12:40
• 1 I want to build proper URL string from scratch by specifying it's parts. This is a classic builder pattern scenario. – Slava Fomin II Commented Apr 26, 2019 at 12:45

3 Answers 3

You have already figured out the workaround and there is no alternative other than passing the parts in or starting with a URL and mutating it.

I'll try to answer:

What caused such design decision in the first place?

By far the most mon use case for URLs was to create a URL from a URL string. Someone actually did end up asking for the API you are describing in the URL spec and discussion mostly stalled.

We have an API in Node.js for constructing URLs from parts - but that creates a string one would still need to pass to the URL constructor.

So this is likely not a bad idea and it is currently blocked on someone actually doing the work of adding that capability.

The only workaround I've found so far is to use minimal correct URL to initialize the object and then to override it's parts (namely protocol and host).

const url = new URL('https://example.');

url.protocol = 'http';
url.host = 'google.';

console.log(url.toString()); // outputs: http://google./

However, it's still cumbersome for this use case.

Is there a way to overe this limitation somehow?

Yes! and I'm really suprissed hardly anyone is talking about it!

thismessage: was designed exactly for this purpose!

The handling of relative and absolute URIs for matching between body parts have been merged into a single description, by specifying that relative URIs, which cannot be resolved otherwise, should be handled as if they had been given the URL "thismessage:/". https://www.rfc-editor/rfc/rfc2557.html#section-12

When the methods above do not yield an absolute URI, a base URL of "thismessage:/" MUST be employed. This base URL has been defined for the sole purpose of resolving relative references within a multipart/related structure when no other base URI is specified. https://www.rfc-editor/rfc/rfc2557.html#section-5

The concept is that first argument to the URL constructor is the path either absolute or relative and the second argument is the base URI to associate this to. We typically think of the base as something like https://example./ but that is not necessary especially when the URL we are building does not have any need for such a base.

let url = new URL('some/path/we/care/about', 'thismessage:/');
url.searchParams.set('foo', 'bar');

// 12 being the length of 'thismessage:'
let resultWithoutProtocol = url.href.substring(12);

document.querySelector('output').value = resultWithoutProtocol;

<code><output></output></code>