替換多個鏈接

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

有什么建議么？

我正在談論的.link元素中有多個a href鏈接。

Answer 1

這不使用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> 

編輯：展開的示例顯示在多個鏈接分類的對象內替換了多個錨hrefs。

Edit2：Thomas示例是一個更高級的示例，在使用querySelectorAll（“。link a”）;時在技術上更正確 它會抓住后代的錨點，而不僅僅是孩子。 編輯我的跟隨套件。

如果僅打算選擇鏈接類元素的直接子代，請為選擇器使用“ .link> a”而不是“ .link a”。

Answer 2

您的錯誤在於使用querySelector，因此document.querySelector(".link").querySelector("a")字面意思是：在第a .link里面得到第a ；

使用querySelectorAll; 您可以結合使用兩個選擇器：

香草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 3

嘗試對每個“ .link”元素使用一個foreach循環。 似乎每個“ .link”元素內部至少有1個錨，也許只有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); }); 

我沒有測試它，但是它應該使您前進。 考慮到我們可以分三行繼續進行。

干杯

編輯

我進行最后嘗試，查看您的已更新問題的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');
 }
}

我建議閱讀以下帖子評論，了解一些循環/制作foreach項目的更酷方法。

如何使用jQuery更改超鏈接的href