如何從鏈接中獲取 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>