如何从链接中获取 href 值以用作值？

Question

我有以下设置：

<div class="map-container">
  <div class="map-pointer">
    <a href="https://my-link-1.com"></a>
  </div>
  <div class="map-pointer">
    <a href="https://my-link-2.com"></a>
  </div>
  <div class="map-pointer">
    <a href="https://my-link-3.com"></a>
  </div>
  ... 15 .map-pointer div's in total
</div>

我想做的是，a-元素的内容将自动填充为 href 的值。 从 https://、'-' 和 .com 中剥离。

所以我的链接最终会是这样的：

<a href="https://my-link-1.com">my link 1</a>
<a href="https://my-link-2.com">my link 2</a>
...

这对 jQuery 可行吗？ 我不知道从哪里开始。 我知道我首先必须将 href 属性存储在一个变量中。 但是我怎样才能为所有不同的链接做到这一点呢？

Answer 1

可以这样做：

 $("a").each(function() { var linkName; linkName = this.href.replace("https://", ""); linkName = linkName.replace(/-/g," "); linkName = linkName.replace(".com/", ""); this.innerHTML = linkName; })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="map-container"> <div class="map-pointer"> <a href="https://my-link-1.com"></a> </div> <div class="map-pointer"> <a href="https://my-link-2.com"></a> </div> <div class="map-pointer"> <a href="https://my-link-3.com"></a> </div> </div>

Answer 2

你可以试试这个：

 let title = ''; $('.map-container a').map( function() { let href = $(this).attr('href'); title = href.replace('https://', '').replace('.com', '').replaceAll('-', ' '); console.log(title) $(this).html(title); }).get();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="map-container"> <div class="map-pointer"> <a href="https://my-link-1.com"></a> </div> <div class="map-pointer"> <a href="https://my-link-2.com"></a> </div> <div class="map-pointer"> <a href="https://my-link-3.com"></a> </div> </div>