Блог

Главная - Вопросы по программированию - Измените все URL-адреса с определенным идентификатором с помощью JavaScript

Измените все URL-адреса с определенным идентификатором с помощью JavaScript

#javascript #html #arrays

#javascript #HTML #массивы

Вопрос:

У меня есть HTML-код для загрузки таких файлов:

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

Я хочу, чтобы все URL-адреса в class="wp-block-button__link теге менялись следующим образом:

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

В настоящее время я изменяю его с помощью Javascript следующим образом:

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

Код javascript, который я использую сейчас, может изменить только один URL-адрес, я хочу изменить все URL-адреса в class="wp-block-button__link" теге.

Как мне заставить код javascript, который я использую, изменять все URL-адреса в теге class="wp-block-button__link" , а не только один URL-адрес?

Комментарии:

1. используйте document.querySelectorAll и просматривайте его

2. @AswinKumar вы можете написать код здесь?

3. document.querySelectorAll('.wp-block-button__link').forEach(a => { a.href = "mydomain.com/get/?url=" a.href });

4. спасибо @briosheje, этот код работает хорошо.

5. @RenomuReza примите любой из приведенных ниже ответов, они показывают тот же код.

Ответ №1:

Используйте querySelectorAll и forEach :

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

Ответ №2:

Используя document.querySelectorAll() и перебирайте его с помощью 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>