Remove http:// and www from all urls displayed using getElementsByClassName or another method

Question

I'm trying to remove the http, https and www from the links that are displayed in each wordpress post.

Turn https://www.example.com/ into example.com

Each link has a unique Id but grouped into classes. The code I currently have removes the http & www from the link if I target it directly but if I switch from getElementByID to getElementsByClassName it just stops working.

I've also tried various methods such as altering the code to Jquery and other targeting methods.

Any help would be much appreicated.

<html>

<a id="link101" class="group1" href="https://www.example1.com/">https://www.example1.com/</a>
<a id="link207" class="group1" href="https://www.example2.com/">https://www.example2.com/</a>
<a id="link55" class="group1" href="https://www.example3.com/">https://www.example3.com/</a>

<a id="link78" class="group2" href="https://www.example4.com/">https://www.example4.com/</a>
<a id="link180" class="group2" href="https://www.example5.com/">https://www.example5.com/</a>
<a id="link166" class="group2" href="https://www.example6.com/">https://www.example6.com/</a>

<a id="link120" class="group3" href="https://www.example7.com/">https://www.example7.com/</a>
<a id="link124" class="group3" href="https://www.example8.com/">https://www.example8.com/</a>
<a id="link310" class="group3" href="https://www.example9.com/">https://www.example9.com/</a>

</html>

Working Code below, but only on the targeted ID. I would have to repeat the script for every instance i'm looking to clean the displayed urls.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<Script>
            $(document).ready(function removeFunction() {
              var str = document.getElementById("link120").innerHTML; 
              var res = str.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "");
              document.getElementById("link120").innerHTML = res;
            });

            $(document).ready(function removeFunction() {
              var str = document.getElementById("link124").innerHTML; 
              var res = str.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "");
              document.getElementById("link124").innerHTML = res;
            });

           $(document).ready(function removeFunction() {
              var str = document.getElementById("link310").innerHTML; 
              var res = str.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "");
              document.getElementById("link310").innerHTML = res;
            });

         </Script>

My attempt at a solution but the code does not work when trying to apply the function to more than one element by targeting the class name:

Attempt #1:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<Script>
            $(document).ready(function removeFunction() {
              var str = document.getElementsByClassName("group3").innerHTML; 
              var res = str.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "");
              document.getElementsByClassName("group3").innerHTML = res;
            });

</Script>

Attempt #2:

<Script>

            $(document).ready(function removeFunction() {
              var str = $('a[id ^= "link_"]').html(); 
              var res = str.replaceWith(/^(?:https?:\/\/)?(?:www\.)?/i, "");
              $('a[id ^= "link_"]').html() = res;
            });

</Script>

ANSWER:

I was able to get the method to work through the below method:

<Script>

            $(document).ready(function removeFunction() {
            let post_id = '<?php global $post; echo $post->ID; ?>';
              var str = document.getElementById("link" + post_id).innerHTML; 
              var res = str.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "");
              document.getElementById("link" + post_id).innerHTML = res;
            });


</Script>

There doesn't appear to be any PHP here. Maybe https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName and `a` is a better approach if you want all links? — user3783243, Nov 30 '19 at 20:41
I posted the solution! I did have to incorporate some php. Thanks — Guyku, Nov 30 '19 at 21:42
You should move that as an answer in that case, not an update. — user3783243, Nov 30 '19 at 21:55

Mário Rodrigues · Answer 1 · 2019-11-30T20:58:38.557

You don't need jQuery in order to make it work. You can you plain Javascript.

// here, you set the group's class name you want to iterate
  var elements =  document.getElementsByClassName("group1");
  // since your getting an array of elements you must iterate them
  for(var i in elements){
    // here, we prevent the undefined items that might occur
    if(elements[i].href !== undefined){
      elements[i].href = elements[i].href.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "");
    }
}

<html>
  <body>
    <a id="link101" class="group1" href="https://www.example1.com/">https://www.example1.com/</a>
    <a id="link207" class="group1" href="https://www.example2.com/">https://www.example2.com/</a>
    <a id="link55" class="group1" href="https://www.example3.com/">https://www.example3.com/</a>

    <a id="link78" class="group2" href="https://www.example4.com/">https://www.example4.com/</a>
    <a id="link180" class="group2" href="https://www.example5.com/">https://www.example5.com/</a>
    <a id="link166" class="group2" href="https://www.example6.com/">https://www.example6.com/</a>

    <a id="link120" class="group3" href="https://www.example7.com/">https://www.example7.com/</a>
    <a id="link124" class="group3" href="https://www.example8.com/">https://www.example8.com/</a>
    <a id="link310" class="group3" href="https://www.example9.com/">https://www.example9.com/</a>
  </body>
</html>

This will iterate every element which class is group1 and replace its href prop.

Hope it helps!

Thanks for the feedback. So I wasn't able to get your code to work but I did find the solution! — Guyku, Nov 30 '19 at 21:40

Remove http:// and www from all urls displayed using getElementsByClassName or another method

1 Answers1