Change All URLs with a Specific ID Using Javascript

Question

I have an html code to download files like this:

<a class="wp-block-button__link has-background has-vivid-green-cyan-background-color" href="https://github.com/pbatard/rufus/releases/download/v3.5/rufus-3.5.exe" rel="nofollow noopener noreferrer">Download (Installer)</a>

<a class="wp-block-button__link has-background has-vivid-green-cyan-background-color" href="https://github.com/pbatard/rufus/releases/download/v3.5/rufus-3.5p.exe" rel="nofollow noopener noreferrer">Download (Portable)</a>

I want all the URLs in the class="wp-block-button__link tag to change like this:

<a class="wp-block-button__link has-background has-vivid-green-cyan-background-color" href="mydomain.com/get/?url=https://github.com/pbatard/rufus/releases/download/v3.5/rufus-3.5p.exe" rel="nofollow noopener noreferrer">Download (Portable)</a>

<a class="wp-block-button__link has-background has-vivid-green-cyan-background-color" href="mydomain.com/get/?url=https://github.com/pbatard/rufus/releases/download/v3.5/rufus-3.5.exe" rel="nofollow noopener noreferrer">Download (Installer)</a>

I am currently changing it using Javascript like this:

let a = document.querySelector('.wp-block-button__link');
a.href = "mydomain.com/get/?url=" + a.href
console.log(a.outerHTML)

The javascript code that I use now can only change one URL, I want to change all the URLs in the class="wp-block-button__link" tag.

How do I make the javascript code I use change all URLs in the tag class="wp-block-button__link", not just one URL?

document.querySelectorAll('.wp-block-button__link').forEach(a => { a.href = "mydomain.com/get/?url=" + a.href }); — briosheje
– briosheje, Commented Apr 12, 2019 at 10:19
@RenomuReza accept any of the below answers, they show the same code. — briosheje
– briosheje, Commented Apr 12, 2019 at 10:29

Jack Bashford · Accepted Answer · 2019-04-12 10:18:24Z

2

Use querySelectorAll and forEach:

let allLinks = document.querySelectorAll('.wp-block-button__link');
allLinks.forEach(a => {
    a.href = "mydomain.com/get/?url=" + a.href;
    console.log(a.outerHTML);
});

answered Apr 12, 2019 at 10:18

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

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

Comments

User863 · Accepted Answer · 2019-04-12 10:18:24Z

1

Using document.querySelectorAll() and loop through it with forEach()

let a = document.querySelectorAll('.wp-block-button__link');
a.forEach((i) => i.href = "mydomain.com/get/?url=" + i.href);

<a class="wp-block-button__link has-background has-vivid-green-cyan-background-color" href="https://github.com/pbatard/rufus/releases/download/v3.5/rufus-3.5.exe" rel="nofollow noopener noreferrer">Download (Installer)</a>
<a class="wp-block-button__link has-background has-vivid-green-cyan-background-color" href="https://github.com/pbatard/rufus/releases/download/v3.5/rufus-3.5p.exe" rel="nofollow noopener noreferrer">Download (Portable)</a>

answered Apr 12, 2019 at 10:18

User863

20.1k3 gold badges20 silver badges45 bronze badges

Collectives™ on Stack Overflow

Change All URLs with a Specific ID Using Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related