Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Location search Property
The Location search property returns or sets the query string portion of a URL, including the leading question mark (?). This property allows you to read the search parameters from the current URL or programmatically modify them.
Syntax
Following is the syntax for getting the search property −
location.search
Following is the syntax for setting the search property −
location.search = searchString
Parameters
searchString − A string representing the query parameters, including the leading question mark. For example: "?name=john&age=25"
Return Value
Returns a string containing the query portion of the URL, including the leading ?. If no query string exists, it returns an empty string.
Reading Search Parameters
The search property is commonly used to extract query parameters from the URL for processing form data or application state.
Example
Following example demonstrates how to read the search property from the current URL −
<!DOCTYPE html>
<html>
<head>
<title>Location Search Property - Read</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Current URL Search Parameters</h2>
<button onclick="getSearchParams()">Get Search Parameters</button>
<div id="result" style="margin-top: 15px; padding: 10px; background-color: #f0f0f0;"></div>
<script>
function getSearchParams() {
var searchParams = location.search;
var resultDiv = document.getElementById("result");
if (searchParams) {
resultDiv.innerHTML = "<strong>Search parameters:</strong> " + searchParams;
} else {
resultDiv.innerHTML = "<strong>No search parameters found</strong><br>Try adding ?name=value to the URL";
}
}
</script>
</body>
</html>
If you access this page with a URL like page.html?user=admin&role=editor, clicking the button will display the search parameters.
Search parameters: ?user=admin&role=editor
Setting Search Parameters
You can also modify the search property to change the query string, which will update the current URL and potentially reload the page.
Example
Following example shows how to set new search parameters −
<!DOCTYPE html>
<html>
<head>
<title>Location Search Property - Set</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Modify URL Search Parameters</h2>
<button onclick="setSearchParams()">Add Search Parameters</button>
<button onclick="clearSearchParams()">Clear Search Parameters</button>
<div id="currentUrl" style="margin-top: 15px; padding: 10px; background-color: #f0f0f0;"></div>
<script>
function updateDisplay() {
var urlDiv = document.getElementById("currentUrl");
urlDiv.innerHTML = "<strong>Current URL:</strong> " + location.href;
}
function setSearchParams() {
location.search = "?category=tutorials&topic=javascript";
}
function clearSearchParams() {
location.search = "";
}
// Display current URL on page load
updateDisplay();
</script>
</body>
</html>
Clicking "Add Search Parameters" will append ?category=tutorials&topic=javascript to the URL. Clicking "Clear Search Parameters" will remove all query parameters.
Current URL: http://example.com/page.html?category=tutorials&topic=javascript
Parsing Search Parameters
The search property returns the raw query string. To work with individual parameters, you need to parse the string.
Example
Following example demonstrates parsing individual parameters from the search string −
<!DOCTYPE html>
<html>
<head>
<title>Parse Search Parameters</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Parse URL Search Parameters</h2>
<p>Try accessing this page with: ?name=John&age=30&city=NewYork</p>
<button onclick="parseParams()">Parse Parameters</button>
<div id="output" style="margin-top: 15px;"></div>
<script>
function parseParams() {
var searchString = location.search;
var outputDiv = document.getElementById("output");
if (!searchString) {
outputDiv.innerHTML = "<p style='color: red;'>No search parameters found</p>";
return;
}
// Remove the leading '?' and split by '&'
var params = searchString.substring(1).split('&');
var result = "<h3>Parsed Parameters:</h3><ul>";
for (var i = 0; i < params.length; i++) {
var pair = params[i].split('=');
var key = decodeURIComponent(pair[0]);
var value = decodeURIComponent(pair[1] || '');
result += "<li><strong>" + key + ":</strong> " + value + "</li>";
}
result += "</ul>";
outputDiv.innerHTML = result;
}
</script>
</body>
</html>
With URL parameters like ?name=John&age=30&city=NewYork, this will display each parameter as a separate list item.
Parsed Parameters: ? name: John ? age: 30 ? city: NewYork
Common Use Cases
The Location search property is commonly used for −
Form processing − Reading submitted form data from GET requests
State management − Maintaining application state in the URL
Deep linking − Creating shareable URLs with specific parameters
Analytics tracking − Adding tracking parameters to URLs
Browser Compatibility
The Location search property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It has been part of the DOM specification since early browser versions.
Conclusion
The Location search property provides a simple way to read and modify URL query parameters in JavaScript. It returns the complete query string including the leading question mark, making it essential for handling form data, application state, and URL-based navigation in web applications.
204 Views
