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

Posted 2023-02-22

【中文标题】从多个链接中获取 url 参数并将它们组合成一个 url

【英文标题】：Fetch url parameter from multiple links and combine them into one url

【发布时间】：2021-03-28 17:06:48

【问题描述】：

我正在尝试将多个 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>

【问题讨论】：

如果您删除产品名称和亚马逊网址，代码会更有用且不会分散注意力。

【参考方案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>