从多个链接中获取 url 参数并将它们组合成一个 url

Question

我正在尝试将多个 URL 参数组合在一个连接的链接下。控制台日志记录了所有参数，我的问题是存储的值被覆盖，仅打印最后一个值，并且打印的参数数量与 URL 的实际数量不匹配。我在下面包含了代码：

$('a[ href *= "amazon" ]').each(function () {
    var href = $(this).attr('href');
    var re = /([A-Z0-9]{10})(|\?|\b)/i;

    var asin = re.exec(href)[1];
  
    var asinList = $('#output');
    asinList.text(asin);

    // if (!asin) {
    //   return;
    // }

    console.log('ASIN', asin);

    var result = '';
    for (var i = 0; i < asin.length; i++) {
      result += "&ASIN." + (i + 1) + "=" + asin;
    }

    var printLink = $('.buy-all');
    printLink.text(result);
  });

a { 
  color: black;
}

ol ul { 
  list-style-type: none;
  margin-left: 0;
}

ol ul li { 
  display: inline-block;
}

ol ul li:first-child { 
  margin-right: 10px;
}

.button { 
  background: grey;
  padding: 10px 20px;
  color: white;
  text-decoration: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ol>
  <li>
    <ul>
      <li> <a href="https://www.amazon.co.uk/gp/product/B07DN8T78N/ref=as_li_qf_asin_il_tl?ie=UTF8&amp;tag=amzfoodilem02-21&amp;creative=6738&amp;linkCode=as2&amp;creativeASIN=B07DN8T78N&amp;linkId=5d03f48f9907b98183f7bc4688b7610c" title="Smithcraft 18/8 Stainless Steel Measuring Spoons">Smithcraft 18/8 Stainless Steel Measuring Spoons[B07DN8T78N]</a></li>
      <li class="product-qty">1</li>
    </ul>
  </li>
  <li>
    <ul>
      <li> <a href="https://www.amazon.co.uk/gp/product/B000KGALJE/ref=as_li_tl?ie=UTF8&amp;tag=amzfoodilemma02-21&amp;camp=1634&amp;creative=6738&amp;linkCode=as2&amp;creativeASIN=B000KGALJE&amp;linkId=129ff313793555b5a820d44e105337dd" title="Pyrex glass measuring jug">Pyrex glass measuring jug[B000KGALJE]</a></li>
      <li class="product-qty">1</li>
    </ul>
  </li>
  <li>
    <ul>
      <li> <a href="https://www.amazon.co.uk/gp/product/B07PWY978F/ref=as_li_qf_asin_il_tl?ie=UTF8&amp;tag=amzfoodilem02-21&amp;creative=6738&amp;linkCode=as2&amp;creativeASIN=B07PWY978F&amp;linkId=0e58e0c90267230f6c3410c7a9d00e73" title="Stainless Steel Healthy Ceramic Nonstick Light Gray Saucepan">Stainless Steel Healthy Ceramic Nonstick Light Gray Saucepan[B07PWY978F]</a></li>
      <li class="product-qty">1</li>
    </ul>
  </li>
  <li>
    <ul>
      <li> <a href="https://www.amazon.co.uk/gp/product/B0822VW6JL/ref=as_li_qf_asin_il_tl?ie=UTF8&amp;tag=amzfoodilem02-21&amp;creative=6738&amp;linkCode=as2&amp;creativeASIN=B0822VW6JL&amp;linkId=e3ac2b057458cea023b1049482f5cefd" title="Britten and James Mason Glass ‘Fresh’ 490ml Preserving Jars">Britten and James Mason Glass ‘Fresh’ 490ml Preserving Jars[B0822VW6JL]</a></li>
      <li class="product-qty">1</li>
    </ul>
  </li>
</ol>

<div class="text-center"> <a class="button buy-all" href="" target="_blank" title="Buy ingredients"></a></div>

<p>ASIN list: </p>
<p id="output"></p>

Answer 1

至于仅打印最后一个值，当您在每次迭代时调用 text() 时，它会覆盖该元素中之前的任何内容。

以下使用 URLSearchParams() API 简化了读取现有参数和生成组合参数的过程。它还生成一个值数组，这些值可以使用join() 轻松插入到<p> 中

const combinedParams = new URLSearchParams()

const asinArr = $('a[ href *= "amazon" ]').map(function(i){
    const asin = (new URLSearchParams(this.search)).get('creativeASIN');
    combinedParams.append('ASIN.' +(i+1), asin)
    return asin

}).get()

$('#output').html(asinArr.join('<br>'));
$('.buy-all').text(combinedParams.toString())

console.log('Array:', JSON.stringify(asinArr));

console.log('combined:', combinedParams.toString())

a { 
  color: black;
}

ol ul { 
  list-style-type: none;
  margin-left: 0;
}

ol ul li { 
  display: inline-block;
}

ol ul li:first-child { 
  margin-right: 10px;
}

.button { 
  background: grey;
  padding: 10px 20px;
  color: white;
  text-decoration: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ol>
  <li>
    <ul>
      <li> <a href="https://www.amazon.co.uk/gp/product/B07DN8T78N/ref=as_li_qf_asin_il_tl?ie=UTF8&amp;tag=amzfoodilem02-21&amp;creative=6738&amp;linkCode=as2&amp;creativeASIN=B07DN8T78N&amp;linkId=5d03f48f9907b98183f7bc4688b7610c" title="Smithcraft 18/8 Stainless Steel Measuring Spoons">Smithcraft 18/8 Stainless Steel Measuring Spoons[B07DN8T78N]</a></li>
      <li class="product-qty">1</li>
    </ul>
  </li>
  <li>
    <ul>
      <li> <a href="https://www.amazon.co.uk/gp/product/B000KGALJE/ref=as_li_tl?ie=UTF8&amp;tag=amzfoodilemma02-21&amp;camp=1634&amp;creative=6738&amp;linkCode=as2&amp;creativeASIN=B000KGALJE&amp;linkId=129ff313793555b5a820d44e105337dd" title="Pyrex glass measuring jug">Pyrex glass measuring jug[B000KGALJE]</a></li>
      <li class="product-qty">1</li>
    </ul>
  </li>
  <li>
    <ul>
      <li> <a href="https://www.amazon.co.uk/gp/product/B07PWY978F/ref=as_li_qf_asin_il_tl?ie=UTF8&amp;tag=amzfoodilem02-21&amp;creative=6738&amp;linkCode=as2&amp;creativeASIN=B07PWY978F&amp;linkId=0e58e0c90267230f6c3410c7a9d00e73" title="Stainless Steel Healthy Ceramic Nonstick Light Gray Saucepan">Stainless Steel Healthy Ceramic Nonstick Light Gray Saucepan[B07PWY978F]</a></li>
      <li class="product-qty">1</li>
    </ul>
  </li>
  <li>
    <ul>
      <li> <a href="https://www.amazon.co.uk/gp/product/B0822VW6JL/ref=as_li_qf_asin_il_tl?ie=UTF8&amp;tag=amzfoodilem02-21&amp;creative=6738&amp;linkCode=as2&amp;creativeASIN=B0822VW6JL&amp;linkId=e3ac2b057458cea023b1049482f5cefd" title="Britten and James Mason Glass ‘Fresh’ 490ml Preserving Jars">Britten and James Mason Glass ‘Fresh’ 490ml Preserving Jars[B0822VW6JL]</a></li>
      <li class="product-qty">1</li>
    </ul>
  </li>
</ol>

<div class="text-center"> <a class="button buy-all" href="" target="_blank" title="Buy ingredients"></a></div>

<p>ASIN list: </p>
<p id="output"></p>