snippetjavascriptTip
Join the segments of a URL using JavaScript
Viewed 0 times
urljavascriptjoinsegmentstheusing
Problem
When building URLs programmatically, it's often necessary to join the segments of a URL together. While seemingly simple, there are many nuances and edge cases you need to take care of. Luckily, approaching this step-by-step can help you build a robust solution.
The first step is simply joining the segments together. This can be done using the
Normalizing the URL can then be done via a series of
Putting everything together, you can create a function that joins the segments of a URL and normalizes the resulting URL.
The first step is simply joining the segments together. This can be done using the
Array.prototype.join() method with a slash ('/') as the separator. This will join the segments together, but it won't handle any normalization of the resulting URL.Normalizing the URL can then be done via a series of
String.prototype.replace() calls with various regular expressions. This will remove double slashes, add proper slashes for the protocol, remove slashes before parameters, combine parameters with '&', and normalize the first parameter delimiter.Putting everything together, you can create a function that joins the segments of a URL and normalizes the resulting URL.
Solution
const joinURL = (...args) =>
args
.join('/')
.replace(/[\/]+/g, '/')
.replace(/^(.+):\//, '$1://')
.replace(/^file:/, 'file:/')
.replace(/\/(\?|&|#[^!])/g, '$1')
.replace(/\?/g, '&')
.replace('&', '?');
joinURL('http://www.google.com', 'a', '/b/cd', '?foo=123', '?bar=foo');
// 'http://www.google.com/a/b/cd?foo=123&bar=foo'Normalizing the URL can then be done via a series of
String.prototype.replace() calls with various regular expressions. This will remove double slashes, add proper slashes for the protocol, remove slashes before parameters, combine parameters with '&', and normalize the first parameter delimiter.Putting everything together, you can create a function that joins the segments of a URL and normalizes the resulting URL.
Code Snippets
const joinURL = (...args) =>
args
.join('/')
.replace(/[\/]+/g, '/')
.replace(/^(.+):\//, '$1://')
.replace(/^file:/, 'file:/')
.replace(/\/(\?|&|#[^!])/g, '$1')
.replace(/\?/g, '&')
.replace('&', '?');
joinURL('http://www.google.com', 'a', '/b/cd', '?foo=123', '?bar=foo');
// 'http://www.google.com/a/b/cd?foo=123&bar=foo'Context
From 30-seconds-of-code: join-url-segments
Revisions (0)
No revisions yet.