By Vishal Basumatary in javascript — Mar 24, 2023

url query example

URL Query Example

URL query is a part of the URL that contains specific parameters or values. These parameters are separated from the rest of the URL by a question mark (?), and multiple parameters are separated from each other by an ampersand (&). An example of a URL query is:


https://www.example.com/search?q=example&page=2&sort=desc

In this example, the URL query contains three parameters:

q: the search query, which is set to "example"
page: the page number, which is set to 2
sort: the sort order, which is set to "desc"

You can use URL queries to pass information from one page to another. For example, if you have a search form on your website, you can use a URL query to pass the search query to the search results page. You can also use URL queries to track user behavior or to implement features like pagination or sorting.

Using URL Queries in HTML Forms

If you want to include a URL query in an HTML form, you can use the GET method. When a user submits a form using the GET method, the form data is appended to the URL as a query string. Here's an example:


<form action="/search" method="GET">
  <input type="text" name="q">
  <button type="submit">Search</button>
</form>

In this example, the form action is set to "/search", and the method is set to GET. When a user submits the form with a search query, the URL will look something like this:


https://www.example.com/search?q=search+query

The value of the search query parameter ("search query") is URL-encoded, which means that spaces are replaced with plus signs (+).

Using URL Queries in JavaScript

If you want to access URL queries in JavaScript, you can use the window.location.search property. This property contains the URL query string, including the question mark. Here's an example:


var queryString = window.location.search;
console.log(queryString);
// Output: "?q=example&page=2&sort=desc"

In this example, the window.location.search property is assigned to a variable called queryString, and then logged to the console. The output shows the entire URL query string.

Using Highlight.js for Syntax Highlighting

If you want to add syntax highlighting to your HTML code, you can use a library like Highlight.js. First, you need to include the Highlight.js CSS and JavaScript files in your HTML:


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>

Then, you can add the hljs class to any <pre> or <code> element that contains code that you want to highlight:


https://www.example.com/search?q=example&page=2&sort=desc

In this example, the <code> element has both the language-html and hljs classes, which tell Highlight.js to highlight the code as HTML.

You can also use other classes to specify the language of the code, like language-javascript or language-css.