Javascript Match regex with classname and return the innerHTML value in an Array

Question

I'm trying to develope javascript code that matches every Span Tag with with the classname 'a-size-base a-color-price s-price a-text-bold' and returns in an Array the innerhtml of it. So basically I need the price of every spam in an array list.

Can somebody show me how to do this because I have no idea how to put the match function with the classname together and take the innerHTML of it.

<span class="a-size-base a-color-price s-price a-text-bold">EUR 16,90</span>
<span class="a-size-base a-color-price s-price a-text-bold">EUR 20,09</span> 
<span class="a-size-base a-color-price s-price a-text-bold">EUR 19,90</span> 
<span class="a-size-base a-color-price s-price a-text-bold">EUR 12,90</span>

var prices = [...document.querySelectorAll('span.a-size-base')].map(el => el.textContent.split(' ')[1]); — Jared Smith
– Jared Smith, Commented Jan 5, 2018 at 19:40
Should I write anything infront of ...document.querySelectorAll? What does this do? Is it like document.getElementbyClassName? — JPqnp
– JPqnp, Commented Jan 5, 2018 at 19:47
@Jared Smith Thanks! that code helped a lot! But is there a way to select more than two characters because at the end of your code is [1] which let me print only the first alphabetical Character but I need the first, second, third and fourth character. — JPqnp
– JPqnp, Commented Jan 5, 2018 at 20:50

Jared Smith · Accepted Answer · 2018-01-06 02:52:41Z

1

If your input is like the sample provided, this should work:

// Since .querySelectorAll returns a NodeList and we want an
// Array we'll use the spread operator to make it one.
let prices = [...document.querySelectorAll('span.size-a-base')]
  .map(el => {
    // sample input was EUR 19,90 so we'll split on the space
    // and grab the price.
    let [currency, price] = el.textContent.trim().split(' ');
    return price;
  });

edited Jan 6, 2018 at 2:52

answered Jan 5, 2018 at 22:40

Jared Smith

22.3k5 gold badges50 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user557597 · Accepted Answer · 2018-01-05 20:17:34Z

Here you go a regex to get the price of your span/class=value.
What you're looking for is in capture group 2.

/<span(?=(?:[^>"']|"[^"]*"|'[^']*')*?\sclass\s*=\s*(?:(['"])\s*a-size-base\s*a-color-price\s*s-price\s*a-text-bold\s*\1))\s+(?:"[\S\s]*?"|'[\S\s]*?'|[^>]*?)+>([\S\s]*?)<\/span\s*>/

(Warning, parsing html with regex can be hazardous)

https://regex101.com/r/myziY9/1

Scraper Series
Formatted:

 < span 
 (?=                                                           # Assertion (a pseudo atomic group)
      (?: [^>"'] | " [^"]* " | ' [^']* ' )*?
      \s 
      class \s* = \s*                                               # class attribute
      (?:
           ( ['"] )                                                      # (1), # quote begin
           \s* 
           a-size-base \s* a-color-price \s* s-price \s* a-text-bold     # value to find
           \s* 
           \1                                                            # quote end
      )
 )
 \s+ 
 (?: " [\S\s]*? " | ' [\S\s]*? ' | [^>]*? )+
 >
 ( [\S\s]*? )                                                  # (2), content
 </span \s* >

Collectives™ on Stack Overflow

Javascript Match regex with classname and return the innerHTML value in an Array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related