Resolving Relative URLs with a Base URL in TypeScript

Many web applications utilize relative URLs for resources like images, scripts, and stylesheets. This challenge asks you to implement a function that resolves these relative URLs against a provided base URL, producing absolute URLs. This is a common task in frontend development and understanding how to handle it correctly is crucial for building robust web applications.

Problem Description

You need to create a TypeScript function called resolveUrl that takes two string arguments: baseUrl and relativeUrl. The function should return a single string representing the absolute URL formed by resolving the relativeUrl against the baseUrl.

What needs to be achieved:

The function must combine the baseUrl and relativeUrl to create a complete, absolute URL. It should handle various scenarios, including:

• relativeUrl starting with a forward slash /: In this case, the baseUrl's hostname and protocol should be discarded, and the relativeUrl should be appended directly.
• relativeUrl starting with ../: This indicates navigating up the directory structure. The function should remove segments from the baseUrl until the relativeUrl is fully resolved.
• relativeUrl starting with a single /: Similar to the first case, the baseUrl's hostname and protocol should be discarded, and the relativeUrl should be appended directly.
• relativeUrl being an absolute URL (starting with http:// or https://): In this case, the function should simply return the relativeUrl unchanged.
• baseUrl being an empty string: The function should return the relativeUrl as is, if it's not an absolute URL. If relativeUrl is an absolute URL, return it unchanged.
• relativeUrl being an empty string: The function should return the baseUrl as is.

Key Requirements:

• The function must be written in TypeScript.
• The function must handle all the scenarios described above correctly.
• The function should be robust and avoid errors when given unexpected input.
• The function should return a string.

Expected Behavior:

The function should return a valid absolute URL string. The URL should be properly formatted, with the correct protocol, hostname, and path.

Edge Cases to Consider:

• URLs with query parameters and fragments.
• URLs with encoded characters.
• Very long URLs.
• Invalid URLs (though the function doesn't need to validate the URL's validity, it should still resolve it as best as possible).

Examples

Example 1:

Input: baseUrl = "https://www.example.com/path/to/resource", relativeUrl = "images/logo.png"
Output: "https://www.example.com/path/to/resource/images/logo.png"
Explanation: The relative URL is appended to the base URL's path.

Example 2:

Input: baseUrl = "https://www.example.com/path/to/resource", relativeUrl = "/images/logo.png"
Output: "/images/logo.png"
Explanation: The relative URL starts with a forward slash, so the base URL's hostname and protocol are discarded.

Example 3:

Input: baseUrl = "https://www.example.com/path/to/resource", relativeUrl = "../images/logo.png"
Output: "https://www.example.com/path/images/logo.png"
Explanation: The relative URL navigates up one directory level.

Example 4:

Input: baseUrl = "https://www.example.com/path/to/resource", relativeUrl = "https://www.anotherdomain.com/images/logo.png"
Output: "https://www.anotherdomain.com/images/logo.png"
Explanation: The relative URL is an absolute URL, so it's returned unchanged.

Example 5:

Input: baseUrl = "", relativeUrl = "images/logo.png"
Output: "images/logo.png"
Explanation: Base URL is empty, so relative URL is returned.

Example 6:

Input: baseUrl = "https://www.example.com", relativeUrl = ""
Output: "https://www.example.com"
Explanation: Relative URL is empty, so base URL is returned.

Constraints

• baseUrl and relativeUrl are strings.
• The length of baseUrl and relativeUrl can be up to 2048 characters.
• The function should execute in under 100 milliseconds for typical URLs.
• The function should not throw errors.

Notes

• Consider using string manipulation methods like split, join, and startsWith to efficiently resolve the URLs.
• Pay close attention to the edge cases involving forward slashes and ../.
• You don't need to validate the final URL's validity (e.g., whether it points to a real resource). Focus on correctly resolving the relative path.
• Think about how to handle cases where the baseUrl ends with a forward slash and the relativeUrl also starts with one.