Replace multiple links

Question

I'm trying to replace multiple links but only the first one is replaced, all the other remain the same.

function rep(){
    var text = document.querySelector(".link").querySelector("a").href;

    var newText = text.replace(/http:\/\/test(.*)http:\/\/main(.*)com/, 'http://google$2com');

    document.querySelector(".link").querySelector("a").href = newText;
}

Any suggestions?

It's multiple a href links inside .link elements which I'm talking about.

Answer 1

This doesn't use JQuery, and I've changed your regular expression to something that made more sense for the example. It also works when you run the snippet.

function rep() {

  var anchors = document.querySelectorAll(".link a");
  for (var j = 0; j < anchors.length; ++j) {
    var anchor = anchors[j];
    anchor.href = anchor.href.replace(/http:\/\/test(.*)com/, 'http://google$1com');
  }
}

rep();

a[href]:after {
  content: " (" attr(href)")"
}

<div class="link">
  <a href="http://testsomething.com">What kind of link is this?</a>
  <br/>
  <a href="http://testsomethingelse.com">And what kind of link is this?</a>
  <br/>
</div>

<div class="link">
  <a href="http://testsomething2.com">What kind of link is this?</a>
  <br/>
  <a href="http://testsomethingelse2.com">And what kind of link is this?</a>
  <br/>
</div>

Edit: Expanded example showing multiple anchor hrefs replaced inside multiple link classed objects.

Edit2: Thomas example is a more advanced example, and is more technically correct in using querySelectorAll(".link a"); it will grab anchors in descendants, not just children. Edited mine to follow suite.

If you intend to only select direct children of link class elements, use ".link>a" instead of ".link a" for the selector.

Answer 2

Your mistake is in using querySelector, so document.querySelector(".link").querySelector("a") literally translates to: get me the first a inside the first .link;

Use querySelectorAll; and you can combine the two selectors:

Vanilla JS:

[].forEach.call(document.querySelectorAll('.link a'), function(a){
    a.href = a.href.replace(/http:\/\/test(.*)http:\/\/main(.*)com/, 'http://google$2com');
});

Or, since you'll select items more often, a little utility:

function $$(selector, ctx){
    return Array.from((ctx && typeof ctx === "object" ? ctx: document).querySelectorAll(selector));
}

$$('.link a').forEach(function(a){
    a.href = a.href.replace(/http:\/\/test(.*)http:\/\/main(.*)com/, 'http://google$2com');
})

Or in jQuery:

$('.link a').each(function(){
    this.href = this.href.replace(/http:\/\/test(.*)http:\/\/main(.*)com/, 'http://google$2com');
});

Answer 3

Try using a foreach loop for every ".link" element. It seems that every ".link" element have at least 1 anchor inside, maybe just one. Supposing every .link element has 1 anchor just inside, something like this should do:

    $('.link').each(function(){
       // take the A element of the current ".link" element iterated
       var anchor = $(this).find('a');
       // take the current href attribute of the anchor
       var the_anchor_href = anchor.attr('href');
       // replace that text and achieve the new href (just copied your part)
       var new_href = the_anchor_href.replace(/http:\/\/test(.*)http:\/\/main(.*)com/,'http://google$2com');
       // set the new href attribute to the anchor
       anchor.attr('href', new_href);
    });

I did't test it but it should move you to the way. Consider that we could resume this in 3 lines.

Cheers

EDIT

I give the last try, looking at your DOM of the updated question and using plain javascript (not tested):

var links = document.getElementsByClassName('link');
var anchors = [];
for (var li in links) {
 anchors = li.getElementsByTagName('A');
 for(var a in anchors){
   a.href = a.href.replace(/http:\/\/test(.*)com/, 'http://google$1com');
 }
}

I suggest to read the following post comment for some cooler methods of looping/making stuff foreach item.

How to change the href for a hyperlink using jQuery