Заменить несколько ссылок

Question

Я пытаюсь заменить несколько ссылок, но заменен только первый, все остальные остаются прежними.

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; 
} 

Любые предложения?

Это несколько a href ссылок внутри .link элементов, о которых я говорю.

Answer 1

Ваша ошибка заключается в использовании querySelector, так document.querySelector(".link").querySelector("a") буквально переводится: принеси мне первый a внутри первого .link;

Использовать querySelectorAll; и вы можете объединить два селекторы:

Vanilla JS:

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

Или, так как вы будете выбирать пункты чаще, маленькая утилита:

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'); 
}) 

Или в JQuery:

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

Answer 2

Это не использует JQuery, и я изменил ваше регулярное выражение на то, что имело больше смысла для примера. Он также работает при запуске фрагмента.

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 пример, показывающий несколько hrefs якорь заменить в нескольких ссылок классифицироваться объектов.

Редактировать2: Пример Томаса является более сложным примером и более технически корректен при использовании querySelectorAll (". Link a"); он будет захватывать якоря у потомков, а не только для детей. Отредактировал мой, чтобы последовать за сюитом.

Если вы намерены выбирать только прямые дочерние элементы класса ссылок, используйте «.link> a» вместо «.link a» для селектора.

Answer 3

Попробуйте использовать петлю foreach для каждого элемента «.link». Кажется, что каждый элемент «.link» имеет, по крайней мере, 1 якорь внутри, может быть, один. Предположив каждый .link элемент имеет 1 якорь только внутри, что-то вроде это должно сделать:

$('.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); 
    }); 

Я did't тест, но она должна переместить вас на пути. Учтите, что может возобновить это в 3 строках.

Приветствия

EDIT

Даю последнюю попытку, глядя на свой DOM обновленного вопроса и с помощью простой JavaScript (не проверено):

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'); 
} 
} 

Я предлагаю прочитать следующие 0 коммент. для некоторых более холодных методов петли/создания материала для элемента foreach.

How to change the href for a hyperlink using jQuery