Scraping a float value from the DOM

Question

I have the following element on my page:

<div id="price">$8.00</div>

I want to be able to assign the value 8.00 to a JavaScript variable so that I can perform math on it (specifically 8.00 * .2), and then want to take the new number and place it next to the original, while applying a line-through on the original number ONLY. So the outcome would look something like this:

$8.00 $1.60 (where the "$8.00" has a text-decoration:line-through applied to it.)

I have been able to figure out the math and resetting the text, but I need help figuring out how to take something that's displayed, and make assign its value to a variable. I am using jQuery. Any help is appreciated.

Who is downvoting this question, and why? It's a perfectly fine question. — Brad, Aug 05 '13 at 18:54
Then **say that**. I think this question is narrow enough in focus that there isn't an issue, but any downvote deserves an explanation. — Brad, Aug 05 '13 at 18:55
I can see the down voting of the question, though I'm ok with it... my question is who downvoted Brad's answer initially... — prodigitalson, Aug 05 '13 at 18:55
aparent? try complete. answers getting downvoted instantly for not showing the entire code. this is clearly someone asking for their homework to be done for them with no intention of actually learning anything — bizzehdee, Aug 05 '13 at 18:56
@prodigitalson, My answer's been downvoted twice, also with no explanation. — Brad, Aug 05 '13 at 18:56
@Neal, The close vote explanation is for the close vote. If you're going to downvote on top of that, some explanation is warranted. — Brad, Aug 05 '13 at 18:58
Hello all, thanks for the lot of replies. I apologize for not being clearer in my original question: I didn't provide anything because the first step of this problem requires me to convert the text into a variable, which I do not know how to do at all. I think you're being too quick to judge, @bizzehdee. I am not even in school, and my ONLY intention here is to learn things. — damon, Aug 05 '13 at 19:01
according to [this answer](http://stackoverflow.com/questions/10256061/regular-expression-for-finding-deciaml-float-numbers) also this works: `var value = parseFloat($('#price').text().match(/[+-]?\d+(\.\d+)?/)[0]);` — Stano, Aug 05 '13 at 19:09

score 5 · Accepted Answer · answered Aug 05 '13 at 18:52

5

$('#price').text() will get you the text. From there, you can use parseFloat() to get the number. However, you have a $ in there, so you will need substring as well.

var price = parseFloat($('#price').text().trim().substr(1));

answered Aug 05 '13 at 18:52

Brad

159,648
54
349
530

1

You'd probably want to trim the text before running the substr. Spaces sneak in everywhere. – Bill Criswell Aug 05 '13 at 18:55
1

@BillCriswell Good call, added. – Brad Aug 05 '13 at 18:57

score 2 · Answer 2 · answered Aug 05 '13 at 18:52

You can either use regex to find just the number and use that, or you can get all the information and parseFloat, which will return just the number... Or, if you can modify your html, you can do

<div id="price">$<span id="actual_price">8.00</span></div>

score 2 · Answer 3 · answered Aug 05 '13 at 18:55

2

parseFloat($('#price').text()) will give you the number as a floating point number. however if you want to get a variable you must use var to assign one. Also, you will need to use substring to just get the 8.00 or the variable will be NaN.

answered Aug 05 '13 at 18:55

notquiteamonad

1,159
2
12
28

score 2 · Answer 4 · answered Aug 05 '13 at 18:56

2

HTML

<div id="price">$8.00</div>

jQuery

var price = $('#price').text().substring(1);
  newPrice = price * 0.2;
  newText = '<span>$' + price + '</span> $' + newPrice;
$('#price').html(newText);

CSS

#price span { text-decoration: line-through; }

answered Aug 05 '13 at 18:56

CaribouCode

13,998
28
102
174

Both this, and the selected answer, are exactly what I was looking for. Thanks to both of you. – damon Aug 05 '13 at 19:05

Scraping a float value from the DOM

4 Answers4