Find price in string

Jesper Christensen
Jesper Christensen used Ask the Experts™
on
<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.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
$(document).ready(function(){
  alert($('.product-price').contents().eq(1).text());
});

Open in new window


from https://api.jquery.com/contents/
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
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.
Jesper ChristensenProgrammer

Author

Commented:
Both solutions works :)
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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

When I test the accepted solution I get 349
@Julian, that's odd.
This fiddle shows I get 49,00.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
<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
aha. that's because I used the HTML as provided by the OP. yours has indentation and line-breaks hence the additional text node.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial