Можно назначить URL-адрес в переменной и использовать в HTML.используя JavaScript?

Question

Могу ли я назначить URL-адрес в переменной и использовать в HTML.используя JavaScript?

Пример:

<script>
   var var_url = "https://stackoverflow.com/";
</script>

<a href="var_url"> Click on this link to open www.stackoverflow.com </a>

Выше приведен пример, чтобы понять мой вопрос, я хочу использовать один и тот же URL-адрес много раз в HTMLстр.

Answer 1

В ваш HTML-код вставьте идентификатор для доступа, например,

<a id="demoLink" href=""> Click on this link to open www.stackoverflow.com </a>

, вы можете сделать это с помощью JavaScript, например

<script>
   var var_url = "https://stackoverflow.com/";

    //change the attribute for anchor tag link
    document.getElementById("demoLink").setAttribute("href", var_url);
</script>

Answer 2

https://codepen.io/anon/pen/OdjZEY

<script>
var var_url = 'https://stackoverflow.com/';
</script>

<p>Open in a new window</p>
<a href="javascript:window.open(var_url);">Click on this link to open www.stackoverflow.com</a>

<p>Open in the same window</p>
<a href="javascript:window.location.href
=var_url;">Click on this link to open www.stackoverflow.com</a>

Answer 3

Вы можете использовать JavaScript для вставки URL в тег привязки.

<a id='anchor_1' href=''>Click on this link to open www.stackoverflow.com</a>

<script>
var var_url = "https://stackoverflow.com/";
document.getElementById('anchor_1').setAttribute ('href', var_url);
</script>

Answer 4

Вы можете выбрать все теги привязки с помощью href из var_url, используя:

[...document.querySelectorAll('[href=var_url')]

, а затем изменить каждый href в этом массиве на тот, который хранится в var_url.

var var_url = "https://stackoverflow.com/";
[...document.querySelectorAll('[href=var_url]')].forEach(anchor => {
  anchor.href = var_url;
});

<a href="var_url">Click on this link to open www.stackoverflow.com</a>
<br />
<a href="var_url">You can also click here to open stackoverflow</a>

В качестве альтернативы, я думаю, что было бы лучше использовать класс в ваших тегах привязки и задать URL-адреса с помощью:

[...document.getElementsByClassName('var_url')]

var var_url = "https://stackoverflow.com/";
[...document.getElementsByClassName('var_url')].forEach(anchor => {
  anchor.href = var_url;
});

<a class="var_url" href="#">Click on this link to open www.stackoverflow.com</a>
<br />
<a class="var_url" href="#">You can also click here to open stackoverflow</a>