Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to search and display the pathname part of the href attribute of an area with JavaScript?

HTML Javascript Programming Scripts

To get the pathname part of the href attribute of an area in JavaScript, use the pathname property. This property extracts just the path portion from a URL, excluding the protocol, domain, and query parameters.

Syntax

areaElement.pathname

Example

You can try to run the following code to display the pathname part of an area element's href attribute.

<!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" target="_self">
    </map>
    
    <p id="result"></p>
    
    <script>
        var x = document.getElementById("myarea").pathname;
        document.getElementById("result").innerHTML = "Pathname: " + x;
    </script>
</body>
</html>

Pathname: /about.htm

Working with Different URL Formats

The pathname property works with various URL formats:

<!DOCTYPE html>
<html>
<body>
    <map name="examples">
        <area id="area1" href="contact.html">
        <area id="area2" href="/products/laptops.html">
        <area id="area3" href="https://example.com/services/web-design.html">
    </map>
    
    <div id="output"></div>
    
    <script>
        var area1 = document.getElementById("area1").pathname;
        var area2 = document.getElementById("area2").pathname;
        var area3 = document.getElementById("area3").pathname;
        
        document.getElementById("output").innerHTML = 
            "Area 1 pathname: " + area1 + "<br>" +
            "Area 2 pathname: " + area2 + "<br>" +
            "Area 3 pathname: " + area3;
    </script>
</body>
</html>

Area 1 pathname: /contact.html
Area 2 pathname: /products/laptops.html
Area 3 pathname: /services/web-design.html

Key Points

  • The pathname property returns the path portion of the URL, including the leading slash
  • For relative URLs, it returns the resolved absolute path
  • It works with both relative and absolute URLs in the href attribute
  • The property is read-only for area elements

Conclusion

The pathname property provides a simple way to extract just the path portion from an area element's href attribute. This is useful when you need to work with URL paths without the full URL structure.

Updated on: 2026-03-15T23:18:59+05:30

208 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements