Join URL Segments

Introduction

In this lab, we will explore how to join URL segments and normalize the resulting URL using JavaScript. The lab will guide you through the process of using various regular expressions to remove double slashes, add proper slashes for the protocol, remove slashes before parameters, combine parameters with '&', and normalize the first parameter delimiter. By the end of this lab, you will be able to efficiently join and normalize URL segments using JavaScript.

Skills Graph

URL Segments Joining and Normalization

To join given URL segments together and normalize the resulting URL, follow the steps below:

1. Use Array.prototype.join() to combine URL segments.
2. Use a series of String.prototype.replace() calls with various regular expressions to normalize the resulting URL by:
   • Removing double slashes
   • Adding proper slashes for the protocol
   • Removing slashes before parameters
   • Combining parameters with '&' and normalizing the first parameter delimiter.

Use the code snippet below to join and normalize URL segments:

const URLJoin = (...args) =>
  args
    .join("/")
    .replace(/[\/]+/g, "/")
    .replace(/^(.+):\//, "$1://")
    .replace(/^file:/, "file:/")
    .replace(/\/(\?|&|#[^!])/g, "$1")
    .replace(/\?/g, "&")
    .replace("&", "?");

Example usage:

URLJoin("http://www.google.com", "a", "/b/cd", "?foo=123", "?bar=foo");
// 'http://www.google.com/a/b/cd?foo=123&bar=foo'

Summary

Congratulations! You have completed the Join URL Segments lab. You can practice more labs in LabEx to improve your skills.