Which should take precedence in a URL: the hash or the querystring?

Question

Which should take precedence in a URL: the hash or the querystring?

While some online articles suggest there is no standard for the placement of querystring and hash in a URL, we have continued to observe common practices. This leads to the question: what is the best approach for including both a querystring and hash in the same URL?

The issue at hand is the potential confusion that can arise when the hash comes after the querystring, potentially being interpreted as part of the query data, or vice versa where the whole querystring may be mistaken for a hash. So, the dilemma remains; what order should I adhere to?

javascript url hash query-string

Answer 1

Answer №1

Some sources on the internet claim that there are no set standards for query strings and hash values in URLs.

However, it is important to note that the correct order is for the query string to appear before the fragment identifier (referred to as the hash).

The official specification outlines the structure of a URI:

URI         = scheme ":" hier-part [ "?" query ] [ "#" fragment ]

This clearly illustrates that the fragment should come after the query.

If the hash comes after the query string, it cannot be considered part of the query string data.

That's because the # symbol has a special meaning which signifies the beginning of the fragment. If you want to include it in query string data, it must be encoded as %23.

Answer 2

Some sources on the internet claim that there are no set standards for query strings and hash values in URLs.

However, it is important to note that the correct order is for the query string to appear before the fragment identifier (referred to as the hash).

The official specification outlines the structure of a URI:

URI         = scheme ":" hier-part [ "?" query ] [ "#" fragment ]

This clearly illustrates that the fragment should come after the query.

If the hash comes after the query string, it cannot be considered part of the query string data.

That's because the # symbol has a special meaning which signifies the beginning of the fragment. If you want to include it in query string data, it must be encoded as %23.

Answer 3

Answer №2

I decided to experiment with JavaScript and tried the following:

window.location="alpha#abc?def=34";
console.log(window.location);

The output displayed:

Location {
  hash: "#abc?def=34",
  search: "",
  ...additionalData
}

After that, I executed:

window.location="alpha?abc=34#def";
console.log(window.location);

The result this time was:

Location {
  hash: "#def",
  search: "?abc=34",
  ...additionalData
}

Evidently, in JavaScript, anything after the # symbol is not differentiated, whereas the querystring before the hash works as expected.

Therefore, it's advisable to utilize the querystring first followed by the hash.

Answer 4

I decided to experiment with JavaScript and tried the following:

window.location="alpha#abc?def=34";
console.log(window.location);

The output displayed:

Location {
  hash: "#abc?def=34",
  search: "",
  ...additionalData
}

After that, I executed:

window.location="alpha?abc=34#def";
console.log(window.location);

The result this time was:

Location {
  hash: "#def",
  search: "?abc=34",
  ...additionalData
}

Evidently, in JavaScript, anything after the # symbol is not differentiated, whereas the querystring before the hash works as expected.

Therefore, it's advisable to utilize the querystring first followed by the hash.

Which should take precedence in a URL: the hash or the querystring?

Answer №1

Answer №2

Similar questions

Using jQuery to initiate a page load into a new page within the WorkLight platform

The issue with HTML where the header and footer elements are continuously repeating when

Sending HTML content to viewChild in Angular 5

Switch ng-model in Angular to something different

Using React Native to create a concise text component that fits perfectly within a flexbox with a

Developing desktop applications using C# scripting

WebSocket connection established on port 8888, while the web server is running on port 80 - incompatible to merge the two services

The mapDispatchToProps function is failing to work, throwing an error: Uncaught TypeError: _this.props.addCountdown is not a function

I am unable to load any HTML files in my VueJS iframe, except for the index.html located in the public

IE throwing an invalid argument error when making an AJAX request

Utilizing Multiple Components on a Single Page in React.js

Guide on utilizing the h function in Vue3 for seamless binding and passing of properties and events from parent to child components

The onclick attribute on a button in HTML is not functioning properly following the inclusion of an Ajax load

What is the purpose of using JSON.parse(decodeURIComponent(staticString))?

Guide to sending parameters to the method function of the Vue.js router

What could be preventing the webpack dev server from launching my express server?

Bind AngularJS data to select elements

send document through ajax

Find the mean of three numbers stored in an array of objects

An error has occurred in the Next.js App: createContext function is not defined