Remove A Query String From A URL In JavaScript

Remove a Query String from a URL in JavaScript

During JavaScript web application development, we may get a requirement to remove a query string from a URL. To remove a query string from a URL in JavaScript, read this article’s end.

How to remove a query string from a URL in JavaScript

We offer the following three solutions to help you know how to remove a query string from a URL in JavaScript:

  • Using the substring() method
  • Using the slice() method
  • Using the split() method

Using the substring() method

The substring() method returns a substring of characters between two positions of a string.

Syntax:

string.substring (start, end)

Parameter:

  • start: The starting position.
  • end: The end position (not included).

If start > stop, the substring() method swaps both arguments.

To remove the query string from the URL using the substring() method, we set the start parameter to 0 and the parameter end to the first occurrence of ‘?’ (using the indexOf() method).

Example:

const testURL = 'https://www.w3schools.com/js/tryit.asp?filename=tryjs_editor';

//remove the query string from testURL
const result = testURL.substring(0, testURL.indexOf('?'));

console.log(result);

Output:

https://www.w3schools.com/js/tryit.asp

However, this won’t work if the URL doesn’t contain a query string.

Using the slice() method

The slice() method returns a new string that is a substring of the original string.

Syntax:

string.slice (start, end)

Parameter:

  • start: The starting position.
  • end: End position (not included).

If start > stop, the slice() method will return an empty string.

To remove the query string from the URL using the slice() method, we set the start parameter to 0 and the parameter end to the first occurrence of ‘?’ (using indexOf() method).

Example:

const testURL = 'https://www.w3schools.com/js/tryit.asp?filename=tryjs_editor';

//remove the query string from testURL
const result = testURL.slice(0, testURL.indexOf('?'));

console.log(result);

Output:

https://www.w3schools.com/js/tryit.asp

However, this won’t work if the URL doesn’t contain a query string.

Using the split() method

The split() method returns an array of substrings of the original array.

Syntax:

string.split (delimiter, limit)

Parameter:

  • delimiter: A string or regular expression to use for splitting.
  • limit: limit the number of splits.

To remove the query string from the URL using the split() method, we set the delimiter parameter to ‘?’, then get the element at index 0.

Example:

const testURL = 'https://www.w3schools.com/js/tryit.asp?filename=tryjs_editor';

//remove the query string from testURL
const result = testURL.split('?')[0];
 
console.log(result);

Output:

https://www.w3schools.com/js/tryit.asp

However, this will also work if the URL doesn’t contain a query string.

Example:

const testURL = 'https://www.w3schools.com/js/tryit.asp';

//remove the query string from testURL
const result = testURL.split('?')[0];
 
console.log(result);

Output:

https://www.w3schools.com/js/tryit.asp

Summary

This article has shown how to remove a query string from a URL in JavaScript. I hope the information in this article will be helpful to you. If you have any problems, please comment below. I will answer. Thank you for reading!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *