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 Anchor search Property
The HTML DOM Anchor search property returns or sets the query string part of an anchor element's href attribute. The query string is the portion of a URL that comes after the question mark (?) and contains parameters passed to the server, typically used in GET requests.
Syntax
Following is the syntax for returning the search property −
anchorObject.search
Following is the syntax for setting the search property −
anchorObject.search = querystring
Parameters
-
querystring − A string representing the query string portion of the URL, including the question mark (
?). If no question mark is provided, it will be automatically added.
Return Value
Returns a string containing the query string part of the href attribute, including the question mark. If no query string exists, it returns an empty string.
Example − Getting the Search Property
Following example demonstrates how to retrieve the search property from an anchor element −
<!DOCTYPE html>
<html>
<head>
<title>Anchor Search Property - Get</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<p><a id="myAnchor" href="https://www.example.com/page.html?name=John&age=25">Visit Example Site</a></p>
<button onclick="getSearch()">Get Search String</button>
<p id="result"></p>
<script>
function getSearch() {
var anchor = document.getElementById("myAnchor");
var searchString = anchor.search;
document.getElementById("result").innerHTML = "Search string: " + searchString;
}
</script>
</body>
</html>
The output shows the query string portion of the URL −
Visit Example Site [Get Search String] Search string: ?name=John&age=25
Example − Setting the Search Property
Following example demonstrates how to modify the search property of an anchor element −
<!DOCTYPE html>
<html>
<head>
<title>Anchor Search Property - Set</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<p><a id="myLink" href="https://www.tutorialspoint.com/search.html?q=html" target="_blank">Search HTML Tutorials</a></p>
<p>Current URL: <span id="currentUrl"></span></p>
<button onclick="changeSearch()">Change Search Parameters</button>
<p>Updated URL: <span id="updatedUrl"></span></p>
<script>
// Display initial URL
var link = document.getElementById("myLink");
document.getElementById("currentUrl").innerHTML = link.href;
function changeSearch() {
// Change search parameters
link.search = "?q=javascript&category=tutorial";
document.getElementById("updatedUrl").innerHTML = link.href;
}
</script>
</body>
</html>
The output demonstrates how the search property changes the URL −
Search HTML Tutorials [Change Search Parameters] Current URL: https://www.tutorialspoint.com/search.html?q=html Updated URL: https://www.tutorialspoint.com/search.html?q=javascript&category=tutorial
Example − Multiple Parameters
Following example shows working with multiple query parameters −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Search Parameters</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<p><a id="productLink" href="https://store.example.com/products.php">View Products</a></p>
<button onclick="addFilters()">Add Search Filters</button>
<button onclick="clearFilters()">Clear Filters</button>
<p>Link URL: <span id="linkDisplay"></span></p>
<script>
var productLink = document.getElementById("productLink");
updateDisplay();
function addFilters() {
productLink.search = "?category=electronics&price=100-500&sort=name";
updateDisplay();
}
function clearFilters() {
productLink.search = "";
updateDisplay();
}
function updateDisplay() {
document.getElementById("linkDisplay").innerHTML = productLink.href;
}
</script>
</body>
</html>
The output shows how multiple parameters can be managed −
View Products [Add Search Filters] [Clear Filters] Link URL: https://store.example.com/products.php?category=electronics&price=100-500&sort=name
Key Points
-
The search property includes the question mark (
?) as part of the returned string. -
When setting the search property, if you omit the question mark, it will be automatically added.
-
Setting the search property to an empty string removes all query parameters from the URL.
-
Changes to the search property immediately update the href attribute of the anchor element.
-
The search property does not include the hash fragment (the part after
#).
Browser Compatibility
The anchor search property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It is part of the standard DOM Level 1 specification and has been widely supported since the early versions of these browsers.
Conclusion
The HTML DOM Anchor search property provides a convenient way to read and modify the query string portion of anchor links. It automatically handles the question mark delimiter and allows dynamic manipulation of URL parameters, making it useful for creating interactive web applications that need to modify link destinations based on user input or application state.
189 Views
