I am trying to get prices from between span tags. I would like to have all prices in an array. I cant seem to get it to work, I am guessing my regex is incorrect.

I am looking for any span tags with the class 'amount', the tag has no other attributes set and only has one class. E.g. <span class="amount">&pound;9.99</span>

var prices = resp.fragments['data'].match(/<span class=\"amount\">(.*?)<\/span>/g)
    .map(function(val){
      return val;
});

Output

[ '£9.99', '£100.00' ]

I am trying to get prices from between span tags. I would like to have all prices in an array. I cant seem to get it to work, I am guessing my regex is incorrect.

I am looking for any span tags with the class 'amount', the tag has no other attributes set and only has one class. E.g. <span class="amount">&pound;9.99</span>

var prices = resp.fragments['data'].match(/<span class=\"amount\">(.*?)<\/span>/g)
    .map(function(val){
      return val;
});

Output

[ '£9.99', '£100.00' ]

*** UPDATE ***

Turns out it was an encoding with the ajax response resp.fragments['data'].

I was using regex as it is something I have not really used before in JS and thought I would have a play. I did look at many examples and after about 45 mins with no success I thought a fresh set of eyes would fix it.

I am trying to get prices from between span tags. I would like to have all prices in an array. I cant seem to get it to work, I am guessing my regex is incorrect.

I am looking for any span tags with the class 'amount', the tag has no other attributes set and only has one class. E.g. <span class="amount">&pound;9.99</span>

var prices = resp.fragments['data'].match(/<span class=\"amount\">(.*?)<\/span>/g)
    .map(function(val){
      return val;
});

Output

[ '£9.99', '£100.00' ]

I am trying to get prices from between span tags. I would like to have all prices in an array. I cant seem to get it to work, I am guessing my regex is incorrect.

I am looking for any span tags with the class 'amount', the tag has no other attributes set and only has one class. E.g. <span class="amount">&pound;9.99</span>

var prices = resp.fragments['data'].match(/<span class=\"amount\">(.*?)<\/span>/g)
    .map(function(val){
      return val;
});

Output

[ '£9.99', '£100.00' ]

*** UPDATE ***

Turns out it was an encoding with the ajax response resp.fragments['data'].

I was using regex as it is something I have not really used before in JS and thought I would have a play. I did look at many examples and after about 45 mins with no success I thought a fresh set of eyes would fix it.

• javascript
• regex

• From the example you've given, it seems to be working just fine. – Niet the Dark Absol Commented May 6, 2016 at 14:09
• 1 $('span.amount').val(), won't work? – Avinash Raj Commented May 6, 2016 at 14:10
• 1 Element.innerHTML – emerson.marini Commented May 6, 2016 at 14:10
• 2 Is there any reason that you want to use a regular expression for this? It may be easier to simply target your <span class='amount'> elements and grab the text from each of them. – Rion Williams Commented May 6, 2016 at 14:10
• you can also use jQuery to select element+class $("span.amount") if jQuery is an option – Abdul Ahmad Commented May 6, 2016 at 14:11

3 Answers 3

While a regular expression could work for this, it might be easier to simply select the <span class='amount'> elements and map their innerHTML content to an array via the map() function:

// This would yield an array containing your values
var amounts = Array.prototype.slice
                             .call(document.querySelectorAll('span.amount'))
                             .map(function(a){ return a.innerHTML; });

You can see a working example of this demonstrated here.

Simplest method will be to add this to an invisible DOM object and then traverse it via DOM API

var text  = '<span class="amount">&pound;9.99</span><span class="amount">&pound;9.99</span>'

//now append it to an DOM object

var wrapperDiv = "<div style='display:none' id='tmpDiv'>" + text + "</div>";
document.body.innerHTML += wrapperDiv;

var elements = document.querySelectorAll( "#tmpDiv amount" );
var output = Array.prototype.slice.call( elements ).map( function(val){
  return val.innerText;
})

Another approach could be split the text by <span class="amount"> and get the value after first index

DEMO

    var text  = '<span class="amount">&pound;9.99</span><span class="amount">&pound;9.99</span>'
    var output = [];
text.split('<span class="amount">').forEach( function(val, index) {
   if (index > 0 )
   {
      output.push( val.replace( "</span>", "" ) );
   }
});

document.body.innerHTML += JSON.stringify( output, 0, 4 );

You can use this instead.

var prices = document.getElementsByClassName('amount');
var price_array = [];

for (i= 0; i < prices.length; ++i) {
    price_array.push(prices[i].innerHTML);
}

document.write(" | " + price_array);

<span class='amount'>&pound;123</span>
<span class='amount'>&pound;3</span>
<span class='amount'>&pound;5</span>
<span class='amount'>&pound;64</span>

You don't need to use regex or jQuery for this.