Using jQuery to extract numbers off HTML content

Question

I'm trying to get just the numbers from these divs, so no "$" or "/BX"

 <span class="SRPRef">$6.16/BX</span>
 <div class="Price">$12.32</div>

I'm using this jQuery to calculate the percentage but I don't know how to grab just the integers.

     var PriceReftxt = $('.Price').text();
     var SRPReftxt = $('.SRPRef').text();

        // CONVERT TO DECIMAL
      var PriceRef = parseInt(PriceReftxt).toFixed(2);
      var SRPRef = parseInt(SRPReftxt).toFixed(2);


         // DO LOGIC BASED MATH
      var Increase = (SRPRef - PriceRef);
     var PercentIncrease = ((Increase / PriceRef) * 100).toFixed(2);

        // FIND EMPTY CELL, AND PUT % NUMBER IN
      $('.SavingsPercent').text("Savings: " + PercentIncrease + "%");

[`parseFloat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat) is a thing, and is more suited to your purpose than `parseInt`. — Heretic Monkey, Apr 18 '17 at 20:49
Possible duplicate of [JavaScript get number from string](http://stackoverflow.com/questions/10003683/javascript-get-number-from-string) — But those new buttons though.., Apr 18 '17 at 20:51
Possible duplicate of [How to convert a currency string to a double with jQuery or Javascript?](http://stackoverflow.com/questions/559112/how-to-convert-a-currency-string-to-a-double-with-jquery-or-javascript) — Heretic Monkey, Apr 18 '17 at 20:51
@billynoah The problem with that one is that it doesn't account for decimal numbers. I know the OP said "integers", but I don't think that's what they meant. — Heretic Monkey, Apr 18 '17 at 20:53
`string.match(\d+[\.,]?\d*/);` to match both the numbers with decimal point (or comma) and without them. If you are using decimals (as the example in question suggests) you want `parseFloat`, not `parseInt (just as @MikeMcCaughan suggested). — Viliam Aboši, Apr 18 '17 at 20:55

score 1 · Answer 1 · answered Apr 18 '17 at 20:53

1

RegEx perhaps?

$('.Price').text().replace(/[^0-9]/gi, '');
 var number = parseInt(Price, 10);
 $('.SRPRef').text().replace(/[^0-9]/gi, '');
 var number2 = parseInt(SRPRef, 10);

answered Apr 18 '17 at 20:53

Margeaux Spring

76
1
5

razorsyntax · Accepted Answer · 2017-04-18T20:59:25.260

1

You could use the following to pull out just the decimals:

function extractNumber(string2extract){
    var numberPattern = /[0-9]+(\.[0-9][0-9]?)?/g;
    return string2extract.match(numberPattern);
}

var PriceReftxt = extractNumber($('.Price').text());
var SRPReftxt   = extractNumber($('.SRPRef').text());

edited Apr 18 '17 at 20:59

answered Apr 18 '17 at 20:53

razorsyntax

339
3
8
42

Spencer Wieczorek · Answer 3 · 2017-04-18T21:01:28.000

One thing you could is replace both of those ("$" and "/BX") with an empty string which will effectively remove them if they exist:

myString = myString.replace("$", "").replace("/BX", "");

For example if myString was the value "$6.16/BX", this would make it "6.16".

Or you could make a function that strips everything but numbers and periods. For example:

function getNumerFromString(str)
{
  return str.replace(/[^0-9\.]/g,"");
}

console.log(getNumerFromString("$6.16/BX"))
console.log(getNumerFromString("$12.32"))
console.log(getNumerFromString("abc$1.00def"))

kuzyn · Answer 4 · 2017-04-18T21:11:57.213

As often when trying to parse things, use regex. Made an example with your tag classes. If you want to actually do some math, just parseInt the results

// get our numbers
var res1 = $(".SRPRef").text().match(/\d*\.?\d+/);
var res2 = $(".Price").text().match(/\d*\.?\d+/);

// show our results
$(".result").html(res1 + "<br>" + res2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="SRPRef">$6.16/BX</span>
 <div class="Price">$12.32</div>

<h4>results:<h4>
<span class="result"></span>

Using jQuery to extract numbers off HTML content

4 Answers4