-
-
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" |
@HaNdTriX posted the best solution here.
It's better to use new URL(...) when it's available. Only if it's not available (in older browsers, for example) does it make sense to use something else. In that case, the approach @jlong shows here is excellent.
I'm surprised @slevithan hasn't posted his parseUri() function in his gists.
take care with this function, because parser.href = null will return the infos relative to the current page
parser.protocol; // => "https:"
parser.hostname; // => "gist.github.com"
parser.port; // => "80"
parser.pathname; // => "jlong/2428561
...
also parser.href = '/test' will complete protocol, hostname, and others, with the one relative to the current page
For ftp, ssh, sftp and more i use lib
https://www.npmjs.com/package/uri-parse-lib
<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.comwebsite - ...
- 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.comnew 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#foobarparser.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
so great!!