17

I've just made an html page with target _self

But now I have too many links and I want to change all link targets to _blank and it's hard for me to do. Is there is any javascript which apply on all just to write 1 time ??

Because my code is too long and it is taking too many times to change in all links. Is there is any trick?

like this

<a href="http://www.google.com"></a>
<a href="http://www.facebook.com"></a>
<a href="http://www.gmail.com"></a>
<a href="http://www.twitter.com"></a>
<a href="http://www.stackoverflow.com"></a>
<a href="http://plus.google.com"></a>
9
  • 1
    What program are you using to write your html? The obvious way would be a find and replace...
    – Liath
    Jun 26, 2014 at 10:49
  • No problem for stupid question. I would handle this situation with a better editor, like Sublime Text. In Sublime Text, you would do: 1. Search for "href" 2. Click on "Find all", which selects all "href" results. 3. write your "target" before the "href" Jun 26, 2014 at 10:50
  • noo i dont want to replace is there is any javascipt which open all links in blank?
    – Hammad
    Jun 26, 2014 at 10:51
  • Btw the link URLs in your example are incorrect...they should start with http:// Jun 26, 2014 at 10:51
  • 1
    You shouldn't try to use javascript as a find-and-replace substitute. Jun 26, 2014 at 11:06

5 Answers 5

44

Put this in your <head>:

<base target="_blank">

It will make all URLs on a page open in a new page, unless target is specified.

This is a HTML5-only feature, I learned it from Google's io-2012-slides slide package.

3
  • I don't know, why don't you try? It will not update the rendered HTML code, however... Jun 26, 2014 at 11:00
  • Are you using HTML5? Also it might not get executed since <head> was already executed at page load. Just put the code into your page's <head> and you shouldn't have to change the target on URLs anymore. Jun 26, 2014 at 11:04
  • FYI the default behavior is target="_self" Dec 8, 2017 at 0:19
8

To answer your question, jQuery makes this easy:

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>
    $(function() {
        $('a[href]').attr('target', '_blank');
    });
</script>

This will not modify any <a> tags without an href attribute.

1
  • @Hammad It should work... try this example: jsfiddle.net/spryno724/Hh4S6 You probably don't have jQuery loaded or your not waiting for your document to load before changing the target attributes. Jun 26, 2014 at 11:02
2

It's pretty simple in plain JS too:

var links = document.getElementsByTagName('a');
for (var i=0, len=links.length; i < len; i++) {
  links[i].target = '_blank';
}

(Put this script right before your closing </body> tag or in any case after all the <a> tags on your page.)

1

If you are unable to do a simple find and replace using your HTML editor, you can do something like this using jQuery:

$('a').click(function() {
  $(this).attr('target', '_blank');
});

This will automatically do a target="_blank" for every a that is clicked and open in a new window or new tab(you have no control over this, it depends on user's browser settings).

FIDDLE

Hope this helps!!

5
  • Its important to add jquery 2.1.0 ?
    – Hammad
    Jun 26, 2014 at 11:06
  • Probably because you didn't put the script at the bottom of your page (before the closing </body> tag) or alternatively inside a $(document).ready() callback. Jun 26, 2014 at 11:06
  • Note that the jQuery 2.x branch does not support IE 8 and below. Jun 26, 2014 at 11:07
  • Also note that unlike the other answers here, this answer doesn't change the target until someone actually clicks on a link, so it should appear before any of your other JS code that might set up click events on links (unless none of those other JS links [if you have any] need to actually open in a new window/tab). Jun 26, 2014 at 11:09
  • @Hammad Not necessary, any recent version of jQuery should work. But having a jQuery include is required. Though, 2.X may not work below IE8, it's good for other browsers. The code is jQuery code which you need to put in a $(document).ready(function(){ //...code here..}); inside script tags.
    – Fr0zenFyr
    Jun 26, 2014 at 11:10
1

I've had to deal with this lots of times. Just for the record:

I think there's no need to make javascript perform this task, but here's another approach, instead you can use the find/replace function of your editor and do something like this (provided your links are in that format):

  • Open your editor and look for <a href:

    Find <a href

  • On the replace field type <atarget="_blank"href.

    Replace

  • Replace.

    Text replaced

Or you can append that to the end of the tag by looking for .com"> and replacing it for .com" target="_blank">. You can do this on all editors that have the find/replace feature. It's just a matter of finding patterns and how to replace them.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.