Get text between tags using javascript

Question

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. Eg <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. Eg <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.

@spaceman Thanks for the helpful comment. Your one of those people if someone asked "Is there is a doctor in the house?", you would stand up and say "Sweet load there are loads of doctors out there".

Answer 1

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 .

Answer 2

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.

Answer 3

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 );