Article Categories

Selected Reading

HTML DOM Anchor username Property

HTML Web Development Front End Technology

The HTML DOM anchor username property is used to set or return the username portion of a URL in an anchor element's href attribute. The username appears in URLs that use basic authentication format: protocol://username:password@hostname.

Syntax

Following is the syntax for returning the username property −

anchorObject.username

Following is the syntax for setting the username property −

anchorObject.username = "newUsername"

Parameters

The username property accepts a string value representing the username portion of the URL. When setting this property, it modifies only the username part while keeping the rest of the URL intact.

Return Value

The property returns a string containing the username from the URL, or an empty string if no username is present in the href attribute.

Example − Getting and Setting Username

Following example demonstrates how to get and set the username property of an anchor element −

<!DOCTYPE html>
<html>
<head>
   <title>Anchor Username Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Anchor Username Property Example</h2>
   <p><a id="myAnchor" href="https://john:john123@www.example.com">Visit Example Site</a></p>
   
   <button onclick="showCurrentUsername()">Get Current Username</button>
   <button onclick="changeUsername()">Change Username to "admin"</button>
   <button onclick="showUpdatedUsername()">Get Updated Username</button>
   
   <p id="result" style="margin-top: 15px; padding: 10px; background-color: #f0f0f0;"></p>

   <script>
      function showCurrentUsername() {
         var anchor = document.getElementById("myAnchor");
         var currentUsername = anchor.username;
         document.getElementById("result").innerHTML = "Current Username: " + currentUsername;
      }

      function changeUsername() {
         var anchor = document.getElementById("myAnchor");
         anchor.username = "admin";
         document.getElementById("result").innerHTML = "Username changed to 'admin'";
      }

      function showUpdatedUsername() {
         var anchor = document.getElementById("myAnchor");
         var updatedUsername = anchor.username;
         document.getElementById("result").innerHTML = "Updated Username: " + updatedUsername;
      }
   </script>
</body>
</html>

The output shows the anchor link and three buttons to interact with the username property −

Visit Example Site (link)
[Get Current Username] [Change Username to "admin"] [Get Updated Username]

Initially shows: Current Username: john
After clicking "Change Username": Username changed to 'admin'
After clicking "Get Updated Username": Updated Username: admin

Example − URL Structure Visualization

Following example shows how different parts of a URL with authentication are accessed −

<!DOCTYPE html>
<html>
<head>
   <title>URL Parts with Username</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>URL Structure Analysis</h2>
   <p><a id="authLink" href="https://testuser:pass123@secure.example.com:8080/path">Secure Link</a></p>
   
   <button onclick="analyzeURL()">Analyze URL Parts</button>
   
   

   <script>
      function analyzeURL() {
         var link = document.getElementById("authLink");
         var parts = "URL Analysis:<br>" +
                    "Protocol: " + link.protocol + "<br>" +
                    "Username: " + link.username + "<br>" +
                    "Password: " + link.password + "<br>" +
                    "Hostname: " + link.hostname + "<br>" +
                    "Port: " + link.port + "<br>" +
                    "Pathname: " + link.pathname + "<br>" +
                    "Full href: " + link.href;
         
         document.getElementById("urlParts").innerHTML = parts;
      }
   </script>
</body>
</html>

This example breaks down all components of a URL containing authentication credentials −

After clicking "Analyze URL Parts":
URL Analysis:
Protocol: https:
Username: testuser
Password: pass123
Hostname: secure.example.com
Port: 8080
Pathname: /path
Full href: https://testuser:pass123@secure.example.com:8080/path

Example − Dynamic Username Modification

Following example demonstrates modifying usernames dynamically based on user input −

<!DOCTYPE html>
<html>
<head>
   <title>Dynamic Username Change</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Dynamic Username Modification</h2>
   <p><a id="dynamicLink" href="https://guest:temp@api.example.com/data">API Endpoint</a></p>
   
   
      <label for="newUsername">Enter new username:</label>
      <input type="text" id="newUsername" placeholder="Enter username" style="margin-left: 10px; padding: 5px;">
      <button onclick="updateUsername()" style="margin-left: 10px; padding: 5px 10px;">Update</button>
   
   
   

   <script>
      function updateUsername() {
         var newUser = document.getElementById("newUsername").value;
         var link = document.getElementById("dynamicLink");
         
         if (newUser.trim() === "") {
            document.getElementById("status").innerHTML = "Please enter a valid username";
            document.getElementById("status").style.backgroundColor = "#f8d7da";
            return;
         }
         
         var oldUsername = link.username;
         link.username = newUser;
         
         document.getElementById("status").innerHTML = 
            "Username changed from '" + oldUsername + "' to '" + link.username + "'<br>" +
            "New URL: " + link.href;
         document.getElementById("status").style.backgroundColor = "#d4edda";
      }
   </script>
</body>
</html>

This example allows users to input a custom username and see the URL update in real-time.

Browser Compatibility

The username property is supported in modern browsers that implement the URL API standard. It works with anchor elements that have href attributes containing authentication credentials in the format protocol://username:password@hostname.

Key Points

The username property only works with URLs that contain authentication credentials.
Returns an empty string if no username is present in the URL.
Setting the username modifies the href attribute while preserving other URL components.
The property is part of the URL interface implemented by anchor elements.
Changes to the username property are immediately reflected in the element's href attribute.

Conclusion

The HTML DOM anchor username property provides a convenient way to access and modify the username portion of URLs containing authentication credentials. It is particularly useful for applications that need to dynamically update API endpoints or secure links with different user credentials.

AmitDiwan

Updated on: 2026-03-16T21:38:54+05:30

205 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next