Use jQuery to alter the path based on values in the src attribute

Question

I have tried asking the same question in a different thread, but I phrased my problem incorrectly there. Trying again here.

I have limited/basic knowledge of jQuery and even less of programming.

I contribute to a forum which allows you to customize your thread with HTML/CSS/JS. The page loads content dynamically (I don’t control that content) but I have enough permissions to load some jQuery code in the page.

What I am trying to do, is improve the UI of the page by changing the resolution of the signature image of users who post in the thread by adding a bit of jQuery that would run on page load.

I have tried using replace, but the ask is more sophisticated than my coding knowledge and needs some logic.

The path of the image changes between low resolution and high resolution.

Low resolution for user 1 is:

https://api.domain.com/signatures/user1@subdomain1/SizedImage/150/150/IMG_ABC.jpeg

But the high resolution for user 1 is:

https://subdomain1-user1.domain.com/IMG_ABC.jpeg

However, for user 2 the low resolution path is:

https://api.domain.com/signatures/user2@subdomain2/SizedImage/150/150/IMG_DEF.jpeg

And the high resolution is:

https://subdomain2-user2.domain.com/IMG_DEF.jpeg

Regardless of user and subdomain, the high resolution path always follows the same structure. The subdomains are specific so that part can be ‘hard coded’ if required/easier, but the user names would need to be identified from the low resolution image dynamically and then added in the high resolution path after the subdomain. User and subdomain numbers have been added above to illustrate that they are different but the path for user1 could be apple@banana and for user2 pear@orange.

There are other images on the page, but I only need to do this for the signature ones.

With my basic coding understanding, I am able to do this specifically for one user, but I don’t know how to write the loop to do it for each different user.

Answer 1

1. Select all the low resolution images using the src prefix https://api.example.com/signatures
2. Extract the relevant parts using a regex
3. Replace the image src with the new, translated high resolution image

The best thing is, you really don't need jQuery at all for this

const rx = /^\/signatures\/(.+?)@(.+?)\/SizedImage\/\d+\/\d+\/(.+)$/;

document
  .querySelectorAll('img[src^="https://api.example.com/signatures/"]')
  .forEach((img) => {
    const url = new URL(img.src);
    const match = url.pathname.match(rx);
    if (match) {
      const [, user, domain, file] = match;
      img.src = `https://${domain}-${user}.example.com/${file}`;
    }
  });
  
// Show the result
document.getElementById('result').textContent =
  document.getElementById('example').innerHTML;

#example { display: none; }

<div id="example">
  <img src="https://example.com/not-modified.jpg">
  <img src="https://api.example.com/signatures/user1@subdomain1/SizedImage/150/150/IMG_ABC.jpeg">
  <img src="https://api.example.com/signatures/user2@subdomain2/SizedImage/150/150/IMG_DEF.jpeg">
</div>
<pre id="result"></pre>