Как получить из GET запроса переменные через window.location.href

Question

Стоит задача получать данные из адресной строки браузера и вносить их в произвольные DIV, INPUT.

Идентичный пример кредитного кальтуратора магазина: https://stylus.ua/_form/credit/alfa?store_id=1&is_llc=f&ab_type=110&product_id=400364&product_name=iPhone%20%20iPhone%20XS%2064GB%20Gold&product_cost=20543&product_image=https://stylus.ua/thumbs/108x108/f6/f7/839775.jpeg&markup=&cat_name=iPhone&product_url=https://stylus.ua/apple-iphone-xs-64gb-gold-p400364c170.html

Эта ссылка выводится фреймом на сайте и подтягивает все данные.

Нашел на просторах stackoverflow прекрасный скрипт:

        function getParameterByName(name, url = window.location.href) {
            name = name.replace(/[\[\]]/g, '\\$&');
            var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
                results = regex.exec(url);
            if (!results) return null;
            if (!results[2]) return '';
            return decodeURIComponent(results[2].replace(/\+/g, ' '));
        }

        // query string: ?product_id=112233&product_name=Product1&product_price=799

        var product_id = getParameterByName('product_id'); // "112233"
        var product_name = getParameterByName('product_name'); // "Product1"
        var product_price = getParameterByName('product_price'); // "799"

Единственное, не понимаю как использовать полеченные данные из скрипта в HTML. Буду очень благодарен за подсказку!

Answer 1

Данные вставляются как innerText, innerHTML, value. Можно вообще создать data-атрибут.

Примеры:

function getParameterByName(name, url = window.location.href) {
  name = name.replace(/[\[\]]/g, '\\$&')
  var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
    results = regex.exec(url)
  if (!results) return null
  if (!results[2]) return ''
  return decodeURIComponent(results[2].replace(/\+/g, ' '))
}
const LINK =
  'https://stylus.ua/_form/credit/alfa?store_id=1&is_llc=f&ab_type=110&product_id=400364&product_name=iPhone%20%20iPhone%20XS%2064GB%20Gold&product_cost=20543&product_image=https://stylus.ua/thumbs/108x108/f6/f7/839775.jpeg&markup=&cat_name=iPhone&product_url=https://stylus.ua/apple-iphone-xs-64gb-gold-p400364c170.html'

// query string: ?product_id=112233&product_name=Product1&product_price=799

var product_id = getParameterByName('product_id', LINK) // "112233"
var product_name = getParameterByName('product_name', LINK) // "Product1"
var product_price = getParameterByName('product_price', LINK) // "799"

document.getElementById('product_id').innerText = product_id
document.getElementById('product_name').innerText = product_price
document.getElementById('product_price').innerText = product_name

document.getElementById('product_id_button').innerText = product_id
document.getElementById('product_name_input').value = product_name

div {
  background: #F5F5F5;
  padding: 1em;
  margin: 2em;
}

<div id="product_id">Пусто</div>
<div id="product_name">Пусто</div>
<div id="product_price">Пусто</div>
<input type="text" id="product_name_input">
<button id="product_id_button"></button>

Answer 2

Немного более лаконичный способ получения параметров.
Ну а вывести их в нужный блок, как уже сказали выше, можно через innerText или innerHTML для нужно элемента в случае с текстовым содержимым блока или value для input'a.

//Создаем объект с параметрами из текущего адреса страницы
let params = (new URL(document.location)).searchParams;
//Получаем нужный параметр по его имени
let name = params.get('param_name');


const link = 'https://stylus.ua/_form/credit/alfa?store_id=1&is_llc=f&ab_type=110&product_id=400364&product_name=iPhone%20%20iPhone%20XS%2064GB%20Gold&product_cost=20543&product_image=https://stylus.ua/thumbs/108x108/f6/f7/839775.jpeg&markup=&cat_name=iPhone&product_url=https://stylus.ua/apple-iphone-xs-64gb-gold-p400364c170.html';

let testParams = (new URL(link)).searchParams;
let productName = testParams.get('product_name');
let productCost = testParams.get('product_cost');

document.getElementById('product_name').innerText = productName
document.getElementById('product_cost').value = productCost

<div id="product_name"></div>
<input id="product_cost" type="text">

БЛОГ НА HUSL

Как получить из GET запроса переменные через window.location.href

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