替換多個鏈接

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")字面翻譯爲：獲得我的第.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 2

這不使用JQuery，而且我已將正則表達式更改爲對示例更有意義的內容。它也適用於您運行代碼段時。替換擴展示例示出多個錨點href多個鏈路歸類對象內：

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>

編輯。編輯2：Thomas示例是一個更高級的示例，並且在使用querySelectorAll（「.link a」）時技術上更加正確。它會抓住後代的錨點，而不僅僅是兒童。編輯我的跟隨套件。

如果您打算只選擇鏈接類元素的直接子元素，請使用「.link> a」而不是「.link a」作爲選擇器。

Answer 3

嘗試對每個「.link」元素使用foreach循環。看起來每個「.link」元素都有至少1個錨，可能只有一個。 假設每一個元素。鏈路具有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行。

乾杯

編輯

我給的最後一次嘗試，看你更新的問題的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項目的一些較冷的方法。

How to change the href for a hyperlink using jQuery