Как разделить запрос querySelectorAll? - PullRequest
Новая
       16

Как разделить запрос querySelectorAll?

0 голосов
/ 10 апреля 2019

Я смог запроситьSelectorAll правильного 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"]
     }

     }

Ответы [ 4 ]

0 голосов
/ 10 апреля 2019

Функция может состоять из одной строки: 

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/ is Регулярное выражение
^ начало ввода
. любой символ + повторяется один или несколько раз
\. сама точка
(.+?) шаблон захвата. +? один или несколько не жадных
$1 - захваченный текст.

0 голосов
/ 10 апреля 2019 
 //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];
0 голосов
/ 10 апреля 2019

Оба ответа, упомянутые ранее, верны, но такой подход кажется болезненным. Если вы можете изменить свой 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();
0 голосов
/ 10 апреля 2019

Вы можете использовать простое регулярное выражение, чтобы соответствовать 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>
...