Как вставить данные из script в html?

Question

Нужно в ссылке вывести переменные startlink..., ссылка длинная с всякими & и тп. Код и ссылку можно менять как угодно. Это я для понимания написал. Вроде бы должно быть просто, но я что-то туплю совсем.

<script>
   var startlink = "текст 1";
   var caption= "текст 2";
   var endlink = "текст 3";
</script>

<a href="startlink + caption + endlink">ссылка</a>

Answer 1

<a id="link">ссылка</a>

<script>
   var startlink = "текст 1";
   var caption= "текст 2";
   var endlink = "текст 3";

   var link = `${startlink}${caption}${endlink}`
   var item = document.getElementById('link')
   item.setAttribute('href', link)
</script>

Для генерации конечной ссылки я использовал интерполяцию. Подробнее можете прочитать тут

Answer 2

    <!DOCTYPE html>
    <html lang="ru">
    <head>
      <meta charset="UTF-8" />
      <title>Пример: вставляем данные из <script> в HTML</title>
    </head>
    <body>
      <!--
        Здесь указываем <a> без href, но даём ему id, чтобы потом в JS найти и подставить ссылку.
      -->
      <a id="myLink">Перейти по ссылке</a>

      <script>
        // === 1. Объявляем три переменные ===
        // В вашем случае они могут приходить откуда угодно (API, вычисляться, браться из data-атрибутов и т.п.)
        var startlink = "https://example.com/search?";           // базовая часть
        var caption   = "текст+для+поиска&еще=значение";          // динамическая часть (будет закодирована)
        var endlink   = "&ref=123&utm_source=site";              // хвостовая часть с &-параметрами

        // === 2. Функция, собирающая и возвращающая полный URL ===
        function buildFullLink(base, middle, tail) {
          // Проверяем, что base заканчивается на '?' или '&' — иначе результат может быть некорректным.
          if (!base.endsWith('?') && !base.endsWith('&')) {
            console.warn(
              '[buildFullLink] base не оканчивается на "?" или "&":', base,
              '\nВ итоге URL может сформироваться некорректно.'
            );
            // Если хотите автоматически исправлять, можно так:
            // base = base.includes('?') ? base + '&' : base + '?';
          }

          // Кодируем только «middle» (caption), потому что именно там могут быть пробелы и спецсимволы.
          // Если caption уже содержит несколько пар key=value (типа "q=foo&lang=ru"), 
          // тогда encodeURIComponent закодирует весь "q=foo&lang=ru" как одну строку, 
          // и результат будет не тем, что вы, возможно, ждёте. В этом случае лучше использовать URLSearchParams.
          var encodedMiddle = encodeURIComponent(middle);

          // Склеиваем всё вместе
          return base + encodedMiddle + tail;
        }

        // === 3. Формируем ссылку ===
        var fullHref = buildFullLink(startlink, caption, endlink);

        // === 4. Находим элемент <a> и вставляем в него href ===
        var anchor = document.getElementById("myLink");
        if (anchor) {
          anchor.setAttribute("href", fullHref);
          // При желании сразу можно поменять текст внутри <a>:
          // anchor.textContent = fullHref;
        } else {
          console.error('[myLink] Элемент <a id="myLink"> не найден в DOM.');
        }

        // === 5. Для отладки — покажем результат в консоли ===
        console.log("Собранная ссылка:", fullHref);
      </script>
    </body>
    </html>

БЛОГ НА HUSL

Как вставить данные из script в html?

Ответы (2 шт):