Question

我想在每个锚链接的链接之前添加字符或URL，例如，我想添加https://shorten.com/api/：

<a class="destination" href="https://shorten.com/api/https://destinationlink.com">visit</a>

我该如何使用JavaScript？

Answer 1

您可以使用querySelectorAll()选择所有元素。然后，用forEach()遍历所有这些变量，为 href 属性值添加新值：

var el = document.querySelectorAll('.destination');
el.forEach(function(a){
  a.href += 'https://shorten.com/api/';
  console.log(a.href); // new href value
});

<a class="destination" href="https://destinationlink.com">visit</a>

Answer 2

是的，您可以使用javascript做到这一点，不需要jQuery。

function prependApi() {
  var anchor = document.querySelector('.your-api-link');
  var newUrl = 'http://somenewurl.com/';
  var originalUrl = anchor.getAttribute('href');

  anchor.setAttribute('href', newUrl + originalUrl);
}

prependApi();

<a class="your-api-link" href="http://google.com">Google</a>

Answer 3

使用querySelector()选择目标锚，并使用href属性更改其href属性

var anchor = document.querySelector(".destination");
anchor.href = "https://shorten.com/api/"+anchor.href;

<a class="destination" href="https://destinationlink.com">visit</a>

您还可以使用jQuery来完成这项工作

$(".destination").attr("href", function(i, href){
  return "https://shorten.com/api/"+href;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="destination" href="https://destinationlink.com">visit</a>

Answer 4

有一些将pss内容与psuedo元素一起使用的选项，但是与javascript相比，它是非常有限的。

.destination:before {
  content: attr(href);
  width: 9em;
  display: inline-block;
  overflow-x: hidden;
  vertical-align: middle;
  text-overflow: ellipsis;
  margin-right: 0.5em;
}

<a class="destination" href="https://shorten.com/api/https://destinationlink.com">visit</a>

在锚链接中的链接之前添加字符

4 个答案: