替换多个链路

Replace multiple links

本文关键字：链路 替换      更新时间：2023-09-26

我试图替换多个链接，但只有第一个被替换，其他的都保持不变。

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

你的错误是在使用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');
});

这没有使用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>

编辑:扩展示例，显示多个锚点href在多个链接类对象中被替换。

Edit2: Thomas的例子是一个更高级的例子，并且在使用querySelectorAll("。链接");它将在后代中抓住锚，而不仅仅是孩子。

如果你想只选择链接类元素的直接子元素，使用"。链接>一个"而不是"。为选择器链接一个"

尝试使用foreach循环每个"。链接"元素。似乎每一个"。元素中至少有一个锚点，也可能只有一个。假设每个。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');
 }
}

我建议阅读下面的post comment，以获得一些更酷的方法来循环/为每个项目制作东西。

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

相关文章：