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

这并没有使用JQuery，我已经将你的正则表达式改为对这个例子更有意义的东西。它也适用于您运行代码段。

＆＃13;

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();

＆＃13;

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

＆＃13;

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

＆＃13;

编辑：扩展示例，显示在多个链接类对象中替换的多个锚点hrefs。

Edit2：Thomas示例是一个更高级的示例，在技术上更正确使用querySelectorAll（＆＃34; .link a＆＃34;）;它会抓住后代的锚，而不仅仅是孩子。编辑我的小组。

如果您只想选择链接类元素的直接子元素，请使用＆＃34; .link＆gt; a＆＃34;而不是＆＃34; .link a＆＃34;对于选择器。

Answer 2

您的错误在于使用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 3

尝试为每个“.link”元素使用foreach循环。看起来每个“.link”元素内部至少有一个锚点，也许只有一个。假设每个.link元素都在内部有一个锚，就像这应该做：
    $('.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);
    });
我没有测试它，但它应该让你走的路。考虑一下我们   可以在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');
 }
}

我建议阅读以下发表评论，了解一些更好的循环/制作项目的方法。

How to change the href for a hyperlink using jQuery

替换多个链接

3 个答案: