Last active
September 5, 2022 02:19
-
-
Save Yaffle/1088850 to your computer and use it in GitHub Desktop.
parse URL + absolutize URL in javascript (URLUtils shim - http://url.spec.whatwg.org/#url)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*jslint regexp: true, maxerr: 50, indent: 2 */ | |
(function (global) { | |
"use strict"; | |
function URLUtils(url, baseURL) { | |
var m = String(url).replace(/^\s+|\s+$/g, "").match(/^([^:\/?#]+:)?(?:\/\/(?:([^:@\/?#]*)(?::([^:@\/?#]*))?@)?(([^:\/?#]*)(?::(\d*))?))?([^?#]*)(\?[^#]*)?(#[\s\S]*)?/); | |
if (!m) { | |
throw new RangeError(); | |
} | |
var protocol = m[1] || ""; | |
var username = m[2] || ""; | |
var password = m[3] || ""; | |
var host = m[4] || ""; | |
var hostname = m[5] || ""; | |
var port = m[6] || ""; | |
var pathname = m[7] || ""; | |
var search = m[8] || ""; | |
var hash = m[9] || ""; | |
if (baseURL !== undefined) { | |
var base = new URLUtils(baseURL); | |
var flag = protocol === "" && host === "" && username === ""; | |
if (flag && pathname === "" && search === "") { | |
search = base.search; | |
} | |
if (flag && pathname.charAt(0) !== "/") { | |
pathname = (pathname !== "" ? (((base.host !== "" || base.username !== "") && base.pathname === "" ? "/" : "") + base.pathname.slice(0, base.pathname.lastIndexOf("/") + 1) + pathname) : base.pathname); | |
} | |
// dot segments removal | |
var output = []; | |
pathname.replace(/^(\.\.?(\/|$))+/, "") | |
.replace(/\/(\.(\/|$))+/g, "/") | |
.replace(/\/\.\.$/, "/../") | |
.replace(/\/?[^\/]*/g, function (p) { | |
if (p === "/..") { | |
output.pop(); | |
} else { | |
output.push(p); | |
} | |
}); | |
pathname = output.join("").replace(/^\//, pathname.charAt(0) === "/" ? "/" : ""); | |
if (flag) { | |
port = base.port; | |
hostname = base.hostname; | |
host = base.host; | |
password = base.password; | |
username = base.username; | |
} | |
if (protocol === "") { | |
protocol = base.protocol; | |
} | |
} | |
this.origin = protocol + (protocol !== "" || host !== "" ? "//" : "") + host; | |
this.href = protocol + (protocol !== "" || host !== "" ? "//" : "") + (username !== "" ? username + (password !== "" ? ":" + password : "") + "@" : "") + host + pathname + search + hash; | |
this.protocol = protocol; | |
this.username = username; | |
this.password = password; | |
this.host = host; | |
this.hostname = hostname; | |
this.port = port; | |
this.pathname = pathname; | |
this.search = search; | |
this.hash = hash; | |
} | |
global.URLUtils = URLUtils; | |
}(this)); |
@guybedford, Thanks again,
I updated the code to fix those issues too. Possibly, there are other issues, I did not test well.
P.S. URLUtils
tries to match URL
API available in Chrome and Firefox - new URL('asdf', 'file:///example.org/test')
@Yaffle perhaps it is worth considering turning this into a polyfill repo?
@guybedford, there is one - https://github.com/Polymer/URL
A minor performance optimization for line 21 can be useful:
var base = baseURL instanceof URLUtils ? baseURL : new URLUtils(baseURL);
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@Yaffle thanks so much for the quick response.
When updating to this new code in my tests, I've hit two more issues now unfortunately -
new URLUtils('asdf', 'http://example.org/test')
gives an href ofhttp://example.org//asdf
instead ofhttp://example.org/asdf
new URLUtils('asdf', 'file:///example.org/test')
gives an href offile:/example.org/asdf
instead offile:///example.org/asdf
These issues didn't happen in the original code that I'm still using though so will stick with that for now.