URL parts naming. Inspired from web browsers API (new URL(), window.location) and rfc3986.

url.js

/*
                                                           href
                   ┌────────────────────────────────────────┴──────────────────────────────────────────────┐
                origin                                                                                     │
      ┌────────────┴──────────────┐                                                                        │
      │                       authority                                                                    │
      │           ┌───────────────┴───────────────────────────┐                                            │
      │           │                                         host                                       resource
      │           │                                ┌──────────┴─────────────────┐             ┌────────────┴───────────┬───────┐
      │           │                             hostname                        │          pathname                    │       │
      │           │                 ┌──────────────┴────────────┐               │      ┌──────┴───────┐                │       │
  protocol     userinfo         subdomain                    domain             │      │           filename            │       │
   ┌─┴──┐     ┌───┴────┐            │                  ┌────────┴───────┐       │      │          ┌───┴─────┐          │       │
scheme  │username password lowerleveldomains secondleveldomain topleveldomain port  dirname    basename extension    search   hash
┌──┴───┐│┌──┴───┐ ┌──┴───┐ ┌──┬─┬─┴─────┬───┐┌───────┴───────┐ ┌──────┴──────┐┌─┴┐┌────┴──────┐┌──┴───┐ ┌───┴───┐ ┌────┴────┐ ┌┴┐
│      │││      │ │      │ │  │ │       │   ││               │ │             ││  ││           ││      │ │       │ │         │ │ │
scheme://username:password@test.abcdedgh.www.secondleveldomain.topleveldomain:1234/hello/world/basename.extension?name=ferret#hash
*/

Great post! Thanks 😄

nits:
s/ressource/resource/

My pleasure, what do you mean by "s/ressource/ressource" ?

It looks The s command of sed because not like in french, it is expected that there will be a single s in spelling of the word resource.

Thanks for your great post!

Thank you I'll update shortly

Thank you.

@dmail
I found two errors in your document. I would like you to correct it as it is a very informative document.

The two in the diagram are "search" and "hash". These are defined as Query and Fragment in rfc3986.

Your post has been found by Japanese speakers and is being well-received on Twitter as "easy to understand".
Ref: https://twitter.com/bokken_/status/1553608887739109376?s=20&t=xEvBqi4cGu9-bWu53-i_2g

Once again, thank you for your excellent post.

Translated with www.DeepL.com/Translator (free version)

@dmail Sorry, your document is based on "Location" and not on URL. Please ignore my point.
https://developer.mozilla.org/ja/docs/Web/API/Location

nits:
s/ressource/resource/

It's updated 👍

@dmail Sorry, your document is based on "Location" and not on URL. Please ignore my point.

I have added "Inspired from web browsers API (new URL(), window.location) and rfc3986." to the description 👍

A more detailed description about this gist.

I have created this gist to list and identify all urls parts.
The names are meant to name JavaScript variables or identify what a JavaScript variable refers to.
For this reason names are coming first from URL Web API. Then all blanks left by URL web API are filled using rfc3986.

It results in the 2 differences mentioned in gistcomment-4251501

• "search" from web APIs is favored over "query" from rfc3986
• "hash" from web APIs is favored over "fragment" from rfc3986