URL: pathname property - Web APIs | MDN

Value

A string.

Examples

Pathname with invisible segment

The URL below has just one path segment, the empty string. The pathname value is constructed by prefixing a / character to the empty string.

js

const url = new URL("https://developer.mozilla.org");
console.log(url.pathname); // Logs "/"

Pathname with query parameters

The example below shows the pathname for an HTTPS URL with query parameters.

js

const url = new URL(
  "https://developer.mozilla.org/en-US/docs/Web/API/URL/pathname?q=value",
);
console.log(url.pathname); // Logs "/en-US/docs/Web/API/URL/pathname"

The query parameters do not form part of the path. Note that some systems use the ; and = characters to delimit parameters and parameter values applicable to a path segment. For example, with the URL https://example.org/users;id=42/tasks;state=open?sort=modified, a system might extract and use the path segment parameters id=42 and state=open from the path segments users;id=42 and tasks;state=open.

Pathname with a slug

Some systems define the term slug to mean the final segment of a non-empty path if it identifies a page in human-readable keywords. For example, the URL below has the slug this-that-other-outre-collection.

js

const url = new URL(
  "https://example.org/articles/this-that-other-outre-collection",
);
console.log(url.pathname); // Logs "/articles/this-that-other-outre-collection"

Pathname with opaque path

When the URL uses a non-hierarchical scheme, the pathname property behaves slightly differently. The following example shows a data: URL with no path at all, in which case the pathname is the empty string.

js

const url = new URL("data:");
console.log(JSON.stringify(url.pathname)); // ""

Browsers always strip trailing spaces from pathname during initial parsing if there's no hash or search.

js

const url = new URL("data:text/plain,Hello ");
console.log(JSON.stringify(url.pathname)); // "text/plain,Hello"

However, if the hash or search is not empty during initial parsing, the trailing space is either preserved (old behavior) or percent-encoded (new behavior).

js

const url = new URL("data:text/plain,Hello #frag");
console.log(JSON.stringify(url.pathname)); // "text/plain,Hello " (old) or "text/plain,Hello%20" (new)

If they are later set to empty strings, the trailing space is either removed (old behavior) or remains percent-encoded (new behavior).

js

const url = new URL("data:text/plain,Hello #frag");
url.hash = "";
console.log(JSON.stringify(url.pathname)); // "text/plain,Hello" (old) or "text/plain,Hello%20" (new)

Both behaviors ensure that serializing and parsing the URL round-trip; that is, new URL(url.href).href is always equal to url.href. If the trailing space remains as-is after removing the hash, then new URL() would strip it.

Specifications

Specification
URL
# dom-url-pathname

Browser compatibility

See also

  • The URL interface it belongs to.

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.