Find price in string

<div class="product-price"><span class="price"><strike>349,00&nbsp;</strike></span>49,00&nbsp;<span class="currency">DKK</span></div>

How does I find 49,00 ?
I can´t change the DOM, so I need to find it due jQuery.
Jesper ChristensenProgrammerAsked:
Who is Participating?
 
Flabio GatesCommented:
$(document).ready(function(){
  alert($('.product-price').contents().eq(1).text());
});

Open in new window


from https://api.jquery.com/contents/
0
 
Julian HansenCommented:
var price = $('.product-price span.price')[0].nextSibling.nodeValue.trim();

Open in new window


What the above is doing.
1. find the span.price element inside the element with class product-price.
2. [0] means return the first JavaScript node found (this is now a JavaScript node not a jQuery object)
3. This means we can now use the JavaScript functions on the node. nextSibling will find the text node immediately after the price <span>
4. .nodeValue returns the value of the string
5. Finally we trim the value to get rid of trailing and following white space characters.
0
 
Jesper ChristensenProgrammerAuthor Commented:
Both solutions works :)
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Julian HansenCommented:
When I test the accepted solution I get 349 - where you want 49 - not sure how that equates to a working solution?

For the accepted solution to work on your data you would need to do this

$('.product-price').contents().eq(2).text()

Open in new window

0
 
Flabio GatesCommented:
When I test the accepted solution I get 349
@Julian, that's odd.
This fiddle shows I get 49,00.
0
 
Julian HansenCommented:
<div class="product-price">
   <span class="price">
      <strike>349,00&nbsp;</strike>
    </span>
    49,00&nbsp;
   <span class="currency">DKK</span>
</div>

Open in new window

When you dump this with
console.log($('.product-price').contents());

Open in new window

Gives the following
{…}
0: #text "
   "
1: <span class="price">
2: #text "
    49,00 
   "
3: <span class="currency">
4: #text "
"
context: HTMLDocument http://mrcp9/ee/t2981.html
length: 5
prevObject: Object { 0: div.product-price, length: 1, selector: ".product-price", … }
__proto__: Object { jquery: "1.11.1", constructor: jQuery(), length: 0, … }
t2981.html:54:2

Open in new window

There is an empty text node linked to the original <div> that increases the index of the target node which is the third (index 2) element.

Here is a link to working sample. Use F12 to view the results
0
 
Flabio GatesCommented:
aha. that's because I used the HTML as provided by the OP. yours has indentation and line-breaks hence the additional text node.
0
 
Julian HansenCommented:
Ok but you cannot rely on a solution that requires the formatting of the html to be laid out in a certain way. One space in that line i.e

<div class="product-price"> <span class="price"><strike>349,00&nbsp;</strike></span>49,00&nbsp;<span class="currency">DKK</span></div>

Open in new window

And the solution breaks.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.