URL and URLSearchParams

URL standard implementation.

Modules

• web.url
• web.url.can-parse
• web.url.to-json
• web.url-search-params
• web.url-search-params.delete
• web.url-search-params.has
• web.url-search-params.size.

Types

class URL {
  constructor(url: string, base?: string);
  href: string;
  readonly origin: string;
  protocol: string;
  username: string;
  password: string;
  host: string;
  hostname: string;
  port: string;
  pathname: string;
  search: string;
  readonly searchParams: URLSearchParams;
  hash: string;
  toJSON(): string;
  toString(): string;
  static canParse(url: string, base?: string): boolean;
}

class URLSearchParams {
  constructor(params?: string | Iterable<[key, value]> | Object);
  append(name: string, value: string): void;
  delete(name: string, value?: string): void;
  get(name: string): string | void;
  getAll(name: string): Array<string>;
  has(name: string, value?: string): boolean;
  set(name: string, value: string): void;
  sort(): void;
  toString(): string;
  forEach(
    callbackfn: (value: any, index: number, target: any) => void,
    thisArg: any
  ): void;
  entries(): Iterator<[key, value]>;
  keys(): Iterator<key>;
  values(): Iterator<value>;
  [Symbol.iterator](): Iterator<[key, value]>;
  readonly size: number;
}

Entry points

core-js/proposals/url
core-js(-pure)/stable|actual|full/url
core-js(-pure)/stable|actual|full/url/can-parse
core-js/stable|actual|full/url/to-json
core-js(-pure)/stable|actual|full/url-search-params

Example

Examples:

URL.canParse(
  "https://login:password@example.com:8080/?a=1&b=2&a=3&c=4#fragment"
); // => true
URL.canParse("https"); // => false
const url = new URL(
  "https://login:password@example.com:8080/foo/bar?a=1&b=2&a=3#fragment"
);

console.log(url.href); // => 'https://login:password@example.com:8080/foo/bar?a=1&b=2&a=3#fragment'
console.log(url.origin); // => 'https://example.com:8080'
console.log(url.protocol); // => 'https:'
console.log(url.username); // => 'login'
console.log(url.password); // => 'password'
console.log(url.host); // => 'example.com:8080'
console.log(url.hostname); // => 'example.com'
console.log(url.port); // => '8080'
console.log(url.pathname); // => '/foo/bar'
console.log(url.search); // => '?a=1&b=2&a=3'
console.log(url.hash); // => '#fragment'
console.log(url.toJSON()); // => 'https://login:password@example.com:8080/foo/bar?a=1&b=2&a=3#fragment'
console.log(url.toString()); // => 'https://login:password@example.com:8080/foo/bar?a=1&b=2&a=3#fragment'

for (let [key, value] of url.searchParams) {
  console.log(key); // => 'a', 'b', 'a'
  console.log(value); // => '1', '2', '3'
}

url.pathname = "";
url.searchParams.append("c", 4);

console.log(url.search); // => '?a=1&b=2&a=3&c=4'
console.log(url.href); // => 'https://login:password@example.com:8080/?a=1&b=2&a=3&c=4#fragment'

const params = new URLSearchParams("?a=1&b=2&a=3");

params.append("c", 4);
params.append("a", 2);
params.delete("a", 1);
params.sort();

console.log(params.size); // => 4

for (let [key, value] of params) {
  console.log(key); // => 'a', 'a', 'b', 'c'
  console.log(value); // => '3', '2', '2', '4'
}

console.log(params.has('a')); // => true
console.log(params.has('a', 3)); // => true
console.log(params.has('a', 4)); // => false

console.log(params.toString()); // => 'a=3&a=2&b=2&c=4'

Caveats when using URL and URLSearchParams:

• IE8 does not support setters, so they do not work on URL instances. However, URL constructor can be used for basic URL parsing.
• Legacy encodings in a search query are not supported. Also, Core-JS implementation has some other encoding-related issues.
• URL implementations from all of the popular browsers have much more problems than Core-JS, however, replacing all of them does not looks like a good idea. You can customize the aggressiveness of polyfill by your requirements.