What Does #/ Means in Url

What exactly is the `#:~:text=` location hash in an URL?

Scroll To Text Fragment

OK, with the help of a friend and at the same time via a comment from Berto99 I found it:

Apparently this is a feature called Scroll To Text Fragment. It is enabled by default since Chrome 80, but apparently not yet implemented in other browsers.

There are quite nice examples in the "W3C Community Group Draft Report". More good examples can be found on Wikipedia.

Highlighting the first appearance of a certain text

Just append #:~:text=<text> to the URL. The text search is not case-sensitive.

Example: https://example.com#:~:text=domain

Highlighting a whole section of text

You can use #:~:text=<first word>,<last word> to highlight a whole section of text.

Example: https://stackoverflow.com/questions/62161819/what-exactly-is-the-text-location-hash-in-an-url/62162093#:~:text=Apparently,Wikipedia

More advanced techniques

• Prefixing and suffixing like the example suggested in the repository for the suggestion https://en.wikipedia.org/wiki/Cat#:~:text=Claws-,Like%20almost,the%20Felidae%2C,-cats texts as proposed don't seem to work for me (yet? I use Chrome 83).
• You can style the look of the highlighted text with the CSS :target and you can opt your website out so this feature does not work with it anymore.

What is the behavior of Hash(#) in query string

This is known as the "fragment identifier".

As mentioned in wikipedia:

The fragment identifier introduced by a hash mark # is the optional last part of a URL for a document. It is typically used to identify a portion of that document.

The part after the # is info for the client. It is not sent to the server. Put everything only the browser needs here.

You can use the encodeURIComponent() function in JavaScript to encode special characters in a URL, so that # characters are converted to other characters that way you can be sure your whole URL will be sent to the server.

How to escape hash character in URL

Percent encoding. Replace the hash with %23.

Why is the hash part of the URL not available on the server side?

No, it is available to the browser only, so you have to deal it with Javascript. The server can not read it.

Explanation:
Basically the hash component of the page URL (the part following the # sign) is processed by the browser only - the browser never passes it to the server. This sadly is part of the HTML standard and is the same whether or not you are using IE or any other browser (and for that matter PHP or any other server side technology).

Here's what Wikipedia says about it:

The fragment identifier functions differently than the rest of the URI: namely, its processing is exclusively client-side with no participation from the server. When an agent (such as a Web browser) requests a resource from a Web server, the agent sends the URI to the server, but does not send the fragment. Instead, the agent waits for the server to send the resource, and then the agent processes the resource according to the fragment value. In the most common case, the agent scrolls a Web page down to the anchor element which has an attribute string equal to the fragment value. Other client behaviors are possible

Hash params vs url params, when to use which?

Hash params are useful for single page javascript applications, it allows javascript to present the user with a sharable url for state of the application. This is preferred because if you have a single page javascript application and users navigate and load more content via ajax and share the url, without the hash or a push state modification the person receiving the content would get the homepage or starting state. Hash params can be amended easily and read by javascript without reloading the page.

Hash parameters are usually only used on the client side, hash params wont be passed to the server... so they are only useful for parameterization to the client.

/users#!/13

would load the user index page and then javascript could read the hash

window.location.hash and pass it through some sort of client side router and make an appropriate ajax request and possibly load the user show template and push it to the dom.

Url params and url path are somewhat interchangeable. People usually use url path for describing restful resources such as

/users/[:id] => /users/13 => /users?id=13
/users/:id/posts => /users/13/posts
/users/:user_id/posts/:id => /users/13/posts/22
etc......

@Walter Tross, made a good point from an SEO point of view. Slugged urls or "URL Params" are more indexable by crawlers and tend to rank higher.

For params that do not fit in a resourceful route we send them as params

/users?sort=user_name&order=asc

How do you parse the # hash in URL parameter using browserHistory?

The hash mark # is a special symbol in URLs, used to separate the fragment identifier. Basically, if you have a URL http://www.example.org/foo.html#bar, it will navigate to the element with ID bar in the document http://www.example.org/foo.html. I don't know of any way to include # in the URL without causing this behaviour.

Typically, you would URI-encode the string. The character # is a special character, so to represent it in a URL you would encode it as %23, for instance mysite.com/documents/quote%231930. There is a JS function encodeURIComponent that can perform the encoding for you.

---

Related Topics