-
-
Save jlong/2428561 to your computer and use it in GitHub Desktop.
var parser = document.createElement('a'); | |
parser.href = "http://example.com:3000/pathname/?search=test#hash"; | |
parser.protocol; // => "http:" | |
parser.hostname; // => "example.com" | |
parser.port; // => "3000" | |
parser.pathname; // => "/pathname/" | |
parser.search; // => "?search=test" | |
parser.hash; // => "#hash" | |
parser.host; // => "example.com:3000" |
使用这个可以解决ie10的URL()不存在的问题
use this way to solve problem that ie10 do not have URL() method
A bit of a gotcha with Firefox and relative urls. The following works in Chrome and Safari, but not Firefox:
var parser = document.createElement('a');
parser.href = "/pathname/?search=test#hash";
parser.search;
If you need this, then it's best to stick with:
parser.href.split('?')[1];
Of course in this case the ?
won't be returned like it is with parser.search
like!
parser.href = window.location
If you want the current page info.
const parseURL = (url) => {
if (!url) throw new Error('pls input correct url');
url = url.replace(/\s+/g, '');
const parser = document.createElement("a");
parser.href = url;
const queries = parser.search
.replace(/^?/, "")
.split("&")
.map(item => item.split('='))
.reduce((prev, curr) => ({
...prev,
[curr[0]]: curr[1],
}), {});
return {
protocol: parser.protocol,
host: parser.host,
hostname: parser.hostname,
port: parser.port,
pathname: parser.pathname,
hash: parser.hash,
queries,
}
};
this is gold
Thanks for your sharing.
I LOVE this way, but I'm wondering is it better way than regex.
This is not URI parsing, only URL parsing.
additional you can get the origin at once:
parser.origin // => http://example.com
new URL('https://gist.github.com/jlong/2428561?foo=bar#test')
The Best
new URL('https://gist.github.com/jlong/2428561?foo=bar#test')
The Best
Note that this will only worl with full absolute URLs and throw an error with for example new URL('options.php')
:
TypeError: options.php is not a valid URL.
While the createElement-solution also takes relative URLs (although the result you get back will be a full URL):
let urlParser = document.createElement("a");
urlParser.href = 'options.php';
urlParser.hash = 'foobar';
console.log(urlParser.href);
console.log(urlParser.getAttribute('href'));
// result of both logs is the full URL: https://example.com/options.php#foobar
parser.host and praser.hostname are available,
parser.host - return domain WITH the port ex: github.com
parser.hostname - return just domain ex: github.com:8080
hello, if i need slash at end of url?