Question 35625 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How can I get the href value from a link to use as value? – Jquery

I have following setup:

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

What I want to do is that the content of the a-element will be automatically filled in with the value of the href. Stripped from the https://, the ‘-‘ and .com.

So my links will eventually look like this:

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

Is this possible with jQuery? I’m not sure where to begin. I know that I first have to store the href attribute in a variable. But how can I do that for all the different links?

Tags:

2

Answers


  1. 0

    Can do something like this:

    $("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>
    Login or Signup to reply.
  2. 0

    You can try this :

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search