How to replace plain URL with link using JavaScript ?

How to Open URL in New Tab using JavaScript?

Last Updated : 28 Jun, 2025

To open a URL in a new tab using JavaScript, we can use the window.open() method. The window.open() method is used to open a new browser window or tab. It can also be used to load a specific URL in a new tab.

Syntax

window.open(URL, '_blank');

window.open(): Opens a new tab or window.
First Parameter: The URL you want to open, e.g., "https://www.example.com".
Second Parameter ("_blank"): Tells the browser to open the URL in a new tab.
Return Value: The method returns a reference to the new tab/window or null if it fails.

HTML

<html>
<head></head>
<body>

    <p> Click the button to open
        <b> geeksforgeeks.org </b>
        in new tab
    </p>

   <button onclick="NewTab()">
        Open Geeksforgeeks
    </button>
    <script>
        function NewTab() {
            window.open(
                "https://www.geeksforgeeks.org", "_blank");
        }
    </script>

</body>
</html>

Output:

new-tab — How to Open URL in New Tab using JavaScript?

In this example

A button labeled "Open GeeksforGeeks" is provided for the user to click.
When the button is clicked, it triggers the NewTab() function.
The window.open() method in NewTab() opens the URL "https://www.geeksforgeeks.org" in a new tab ("_blank").

Important Notes:
The return value of window.open() is a reference to the newly created window or tab. It returns null if it fails to open the new tab.
Avoid adding a third parameter to the window.open() method because it could result in a new window instead of a tab.

Handling User Interactions

Most modern browsers block pop-ups, including the window.open() method, when it's not triggered by a direct user action (e.g., a click). To avoid this, ensure that the window.open() method is called inside an event handler like onclick.

HTML

<html>
<head>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <p>Click the button to open <b>GeeksforGeeks</b> in a new tab:</p>

    <button onclick="NewTab()">Open GeeksforGeeks</button>
    <script>
        function NewTab() {
            window.open("https://www.geeksforgeeks.org", "_blank");
        }
    </script>
</body>
</html>

Output

handling-user-interaction — How to Open URL in New Tab using JavaScript?

In this example

When clicked, it runs the NewTab() function.
window.open("https://www.geeksforgeeks.org", "_blank"); opens the GeeksforGeeks website in a new tab.

Applications of Opening URLs in New Tabs

Here are the applications of opening URLs in new tabs:

External Links: When linking to external websites, it’s best to open them in a new tab to keep users on your site.
Forms and Documentation: If you are providing a form or documentation with links to other pages, opening them in new tabs is helpful.
Pop-up Windows: Sometimes you might want to create a pop-up window that behaves like a new tab for displaying additional content.

Difference Between window.open() vs <a> tag

Here is a detailed difference between window.open() vs <a> tag based on their features.

window.open()	<a> Tag
It is used in JavaScript to open a URL programmatically.	It is Used in HTML to create a link that can be clicked.
More control (e.g., can open in new tab, window, or popup).	Less control, opens in the same window or new tab.
"_blank" opens in a new tab, but requires JavaScript.	target="_blank" opens in a new tab, simple HTML.
Requires JavaScript enabled.	Works without JavaScript.
Highly customizable, can control window size, position, etc.	Limited customization (just target behavior).
May be blocked by pop-up blockers if overused.	Safe and standard for linking.
Needs extra handling for accessibility (keyboard, focus, etc.).	Simple and accessible by default.

How to replace plain URL with link using JavaScript ?

H

harshcooldude700

Improve

Article Tags :

Similar Reads

How to open URL in a new window using JavaScript?

In HTML, the anchor tag (<a>) is used to open new windows and tabs in a very straightforward manner. However, there are situations where you need to achieve the same functionality using JavaScript. This is where the window.open() method becomes useful.The window.open() method is used to open a

How to Open URL in New Tab using Angular ?

In this article, we will learn How to open a link in a new tab using Angular. A Link is a connection from one web page to another web page. Generally, the anchor tag can be used to open URLs in a new tab in an elementary and straightforward manner. However, the window.open() method can also be utili

How to get URL Parameters using JavaScript ?

To get URL parameters using JavaScript means extracting the query string values from a URL. URL parameters, found after the ? in a URL, pass data like search terms or user information. JavaScript can parse these parameters, allowing you to programmatically access or manipulate their values.For getti

How to replace plain URL with link using JavaScript ?

Given a plane URL, the task is to replace the plain URLs with the links. This problem can be solved with the help of Regular Expressions. Approach:Â Using RegExp and replace() MethodRegExp - This looks for the URL in the provided text.This RegExp parses the URL and puts the address to the $1 variable

How To Get URL And URL Parts In JavaScript?

In web development, working with URLs is a common task. Whether we need to extract parts of a URL or manipulate the URL for navigation, JavaScript provides multiple approaches to access and modify URL parts. we will explore different approaches to retrieve the full URL and its various components.The

How to redirect to a relative URL in JavaScript?

To redirect to a relative URL in JavaScript, you could use window.location.href. It is a property in JavaScript that represents the complete URL of the current page. It can be used to get the current URL or to navigate to a new URL by assigning a new URL to it. Approach HTML Structure:The HTML file