Converting a series of URL strings to HTML links

Question

Running into an issue. In running the code below, I'm trying to replace a string of text that appears in an blog excerpt field with a clickable link.

jQuery(document).ready(function( $ ) {
    
    var elements = document.getElementsByClassName('post-excerpt');
    if (elements.length > 0) {
    
    $('.post-excerpt').html($('.post-excerpt').html().replace(/((http:|https:)[^\s]+[\w])/g,'<a href="$1" target="_blank">$1</a>'));
    }
    
});

The problem is that the link from the first except is being copied to all other buttons on the page. How do I modify the code above to make sure that it parses through each excerpt link UNIQUELY and replaces that string with an equivalent HTML link?

Louys Patrice Bessette · Accepted Answer · 2021-03-12 01:36:02Z

3

I suppose what you need is an .each() loop:

jQuery(document).ready(function( $ ) {
    
    var elements = $('.post-excerpt')
    if (elements.length > 0) {
      elements.each(function(index,element){
        $(element).html($(element).html().replace(/((http:|https:)[^\s]+[\w])/g,'<a href="$1" target="_blank">$1</a>'));
      })
    }
});

answered Mar 12, 2021 at 1:36

Louys Patrice Bessette

34k7 gold badges40 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

MacGyver_97 Over a year ago

Fantastic, this is perfect! I thought it was the each() function, but wasn't sure how to apply it. Thank you!

Louys Patrice Bessette Over a year ago

By the way... The if statement is useless because if there is no .post-excerpt elements, the each loop just won't run. So you can remove it safely. ;)

MacGyver_97 Over a year ago

Hello again. There's an issue with the above script. I'm adding it to a page that displays a number of blog post thumbnails with pagination. On the first page, the script loads correctly, and the text links are replaced with actual hyperlinks (and the View PDF as a button via CSS). However, when I navigate to the second page of results, the script no longer fires, and I see the actual hyperlink as a string. Is there a way to update the above so that the script continuously fires as I paginate?

Louys Patrice Bessette Over a year ago

The replacements are done when the DOMContentLoaded event fires. Now it should also run when your pagination is creating some new elements. So check if you have an event looking like "after pagination render" with the pagination plugin you have.

MacGyver_97 Over a year ago

Did it by adding $( document ).ajaxComplete(function() { PDFScript(); }) and moving the above code into a function to call.

|

Collectives™ on Stack Overflow

Converting a series of URL strings to HTML links

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related