如何在JavaScript中无基础URL解析相对URL？

Great question! The native URL constructor requires a base URL for relative paths, but we can work around this easily—either with a simple "dummy base" trick using built-in APIs, or with a third-party library if you prefer a more explicit approach.

Built-in Solution (No Dependencies) #

The key insight here is that we can use a dummy base URL (like http://example.com) that doesn't interfere with parsing the relative path components we care about. The URL constructor will resolve the relative path against this dummy base, but we can extract just the parts we need and clean up any artifacts from the base.

Here's a cross-platform function that works in both browsers and Node.js:

function parseRelativeUrl(relativeUrl) {
  // Use a dummy base URL - it won't affect the relative path components
  const dummyBase = 'http://example.com';
  const parsedUrl = new URL(relativeUrl, dummyBase);
  
  // Remove the leading slash from pathname (added by the dummy base's root)
  return {
    pathname: parsedUrl.pathname.replace(/^\//, ''),
    search: parsedUrl.search,
    hash: parsedUrl.hash
  };
}

// Test with your example
const testUrl = 'folder/file.ext?a=1&b=2#hash';
console.log(parseRelativeUrl(testUrl));
// Output: { pathname: "folder/file.ext", search: "?a=1&b=2", hash: "#hash" }

This works because the URL spec defines how relative paths resolve against a base, and the dummy base only contributes the root slash (which we strip out). It's fully compliant with modern browser and Node.js environments (no IE support needed, as requested).

Third-Party Library Option #

If you want to avoid the dummy base hack and prefer a more explicit solution, libraries like url-parse (a popular, cross-platform URL parser) can handle relative URLs directly without requiring a base:

First, install the library:

npm install url-parse

Then use it like this:

// Import (ES modules)
import Url from 'url-parse';

// Or require (CommonJS, Node.js)
// const Url = require('url-parse');

function parseRelativeUrl(relativeUrl) {
  const parsedUrl = new Url(relativeUrl);
  return {
    pathname: parsedUrl.pathname,
    search: parsedUrl.search,
    hash: parsedUrl.hash
  };
}

// Test the example
console.log(parseRelativeUrl('folder/file.ext?a=1&b=2#hash'));
// Output matches your expected result

This library handles edge cases (like empty paths, multiple slashes, etc.) more explicitly if you need robust parsing for complex scenarios.

Final Notes #

• Prefer the built-in solution if you want to avoid adding dependencies—it's lightweight and works everywhere.
• Use the third-party library if you need more control over parsing behavior or want to avoid any dummy URL workarounds.

内容的提问来源于stack exchange，提问作者Franklin Yu