Question

我已经能够querySelectorAll正确的className，标签和href。我正在尝试分割结果，所以只有SKU＃。

HTML

   <div class="mini-cart-product-name">
   <a href="http://example.com/product/12345.html">Product 1</a>
   </div>

   <div class="mini-cart-product-name">
   <a href="http://example.com/product/67890.html">Product 2</a>
    </div>

JS

    function GetCartProducts() {

    var URL = document.querySelectorAll(".mini-cart-product-name a[href*='/product/']");
     for (var i = 0; i < URL.length; i++) {


    console.log(URL.item(i));

    <a href="http://example.com/product/12345.html">Product 1</a>
   </div>

   <a href="http://example.com/product/67890.html">Product 2</a>
    </div>

    // Split result/href to only have the SKU # //
    // Push to array
    // Desired result 
    // var array ["12345","67890"]
     }

     }

Answer 1

您可以使用简单的正则表达式来匹配SKU＃

function GetCartProducts() {
    var SKUs = [];
    var URL = document.querySelectorAll(".mini-cart-product-name a[href*='/product/']");
    for (var i = 0; i < URL.length; i++) {
        SKUs[i] = URL[i].href.match(/\/(\d+)\.html/)[1];
    }
console.log(SKUs);
}
GetCartProducts();

<div class="mini-cart-product-name">
   <a href="http://example.com/product/12345.html">Product 1</a>
   </div>

   <div class="mini-cart-product-name">
   <a href="http://example.com/product/67890.html">Product 2</a>
    </div>

Answer 2

 //Since you revised your criteria, you can do this with a simple string substring and replace
const skuNum = URL.item(i).substring(URL.item(i).lastIndexOf('/') + 1).replace('.html', '');    


//Don't use this if you have something other than numbers in the capture string, see above
//Declare your regular expression, this could be declared before your loop
const reg = /(\d+)\.html/g;
//These next two go inside your loop
//Get the match collection of captures from your regular expression
const matches = reg.exec(URL.item(i));
//Get your sku # from the match colletion
const skuNum = matches[1];

Answer 3

前面提到的两个答案都是正确的，但是这种方法似乎很痛苦。如果您可以修改html代码，建议您将这些SKU作为数据属性传递。

<div data-sku="12345" class="mini-cart-product-name">
    <a href="http://example.com/product/12345.html">Product 1</a>
</div>

<div data-sku="67890" class="mini-cart-product-name">
   <a href="http://example.com/product/67890.html">Product 2</a>
</div>

然后，您需要稍微修改选择器，以免“剪切”这些属性。

function GetCartProducts() {
    var SKUs = [];
    var URL = document.querySelectorAll(".mini-cart-product-name a");
    for (var i = 0; i < URL.length; i++) {
        SKUs[i] = URL[i].dataset.sku;
    }
    console.log(SKUs);
}
GetCartProducts();

Answer 4

该函数可以是这样的一行。

max

min

对function GetCartProducts() { return Array.from(document.querySelectorAll(".mini-cart-product-name a[href*='/product/']")) .map(el => el.href.replace(/^.+product\/(.+?)\.html.*?/i, '$1')) } console.log(GetCartProducts());的一些解释。
<div class="mini-cart-product-name"> <a href="http://example.com/product/12345.html">Product 1</a> </div> <div class="mini-cart-product-name"> <a href="http://example.com/product/67890.html">Product 2</a> </div>是正则表达式
/^.+product\/(.+?)\.html/i输入开始
/whatever/任意字符^重复了一次或多次
.点本身
+捕获模式。 \.一个或多个非贪婪
(.+?)-捕获的文本。

如何拆分querySelectorAll结果？

4 个答案: