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
Selected Reading
How to search the querystring part of the href attribute of an area in JavaScript?
To get the querystring from the href attribute of an area element, use the search property. This property returns the query portion of the URL, including the question mark.
Syntax
areaElement.search
Return Value
Returns a string containing the query portion of the href URL, including the leading question mark (?). Returns an empty string if no query parameters exist.
Example
<!DOCTYPE html>
<html>
<body>
<img src="/images/html.gif" alt="HTML Map" border="0" usemap="#html"/>
<map name="html">
<area id="myarea" shape="circle" coords="154,150,59" href="about.htm?id=company§ion=team" alt="Team" target="_self">
</map>
<script>
var area = document.getElementById("myarea");
var querystring = area.search;
console.log("Full href:", area.href);
console.log("Querystring:", querystring);
// Display in the document
document.write("<p>Querystring: " + querystring + "</p>");
</script>
</body>
</html>
Full href: about.htm?id=company§ion=team Querystring: ?id=company§ion=team
Extracting Individual Parameters
To work with individual query parameters, you can use URLSearchParams:
<!DOCTYPE html>
<html>
<body>
<map name="example">
<area id="testarea" href="page.html?name=john&age=25&city=newyork" alt="Test">
</map>
<script>
var area = document.getElementById("testarea");
var querystring = area.search;
if (querystring) {
var params = new URLSearchParams(querystring);
console.log("Name:", params.get('name'));
console.log("Age:", params.get('age'));
console.log("City:", params.get('city'));
// Display results
document.write("<p>Query Parameters:</p>");
document.write("<ul>");
for (let [key, value] of params) {
document.write("<li>" + key + ": " + value + "</li>");
}
document.write("</ul>");
}
</script>
</body>
</html>
Name: john Age: 25 City: newyork Query Parameters: ? name: john ? age: 25 ? city: newyork
Key Points
- The
searchproperty includes the leading question mark (?) - Returns an empty string if no query parameters exist
- Use
URLSearchParamsto easily parse individual parameters - Works with any valid area element that has an href attribute
Conclusion
The search property provides a simple way to extract query parameters from area elements. Combine it with URLSearchParams for easy parameter parsing and manipulation.
Updated on: 2026-03-15T23:18:59+05:30
195 Views
Advertisements