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

Question

我正在尝试将多个 URL 参数合并到一个连接 link 下。控制台日志记录了所有参数，我的问题是存储的值被覆盖并且只打印最后一个值以及打印的参数数量与 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>

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

Fetch url parameter from multiple links and combine them into one url

url

jquery

url-parameters