-
-
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" |
<3
Well, this great solution works only with 100% consistent URL strings, where all URL parts exists. Try example.com
without the protocol:
- go to any
https://
website, eg.https://microsoft.com
- open console
- write the code:
var parser = document.createElement('a');
parser.href = "example.com"; // for example, this is user entered URL in some form's input field (`Your home page` field or something) and you trying to parse it with the method above in this topic
(You see the trick? The anchor element you've created is not going to the `example.com`, it is going on the current site's `example.com` section page — `https://microsoft.com/example.com`)
- now output the protocol:
console.log(parser.protocol);
- it will output
https:
— because you have created anchor<a>
element onhttps://microsoft.com
website - ...
- PROFIT
<4
just leave this here
rtmp://rtmp-api.facebook.com:80/rtmp/102083600322?ds=1&s_l=1&a=ATjMssSegtYUsg5du
cool !
Why I am getting Port as empty ?
https://jsfiddle.net/mohan_mu/uqf461Lo/
@mohan-mu it's because https default port is 443. Same happens if you use http and port 80.
Any alternative for doing this from within a service worker?
edit: new URL()
seems to do the trick
new URL('your_url') is great idea, however it doesn't work in IE https://developer.mozilla.org/en-US/docs/Web/API/URL/URL#Browser_compatibility
This doesn't work if protocol is " * " .
url=" * ://fgf.com"
" * ://fgf.com"
parser.href = url;
" * ://fgf.com"
parser.protocol
"chrome-extension:" What the hell? It supposed to be "*:" no?
praser.href = "google.com"
// relative url + /google.com
probably you want to add this before checking...
if (!/^(?:f|ht)tps?:///.test(url)) {
url = "http://" + url;
}
This is helpful. Link anatomy
thanks @HaNdTriX ! Definitely the best solution for chrome.
hello, if i need slash at end of url?
使用这个可以解决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
For ftp, ssh, sftp and more i use lib
https://www.npmjs.com/package/uri-parse-lib