Calculating a price per serving of a product

Question

Hi i'm trying to create a calculation to get a price per serving based on the price of the product which is in euro's and separated by a comma, and the number of servings you can get from it which is in parentheses.

So the idea is to get the price then divide the price by the number of servings i.e: 49,90 / 14 = 3.56

Here's my code below. Please note i'm not able to move any of the code around, this is how it is displayed on site.

Any help on this would be appreciated.

function getDiscount() {
  var pattern = /[^0-9\.]/g;
  var pattern2 = (/\(*(\d+.\d+)\)/)[0];
  var price = parseFloat($(".from_price").text().replace(pattern, ""));
  var serving = parseFloat($(".servingScoop").text().match(pattern2).join().replace(pattern, ""));
  var pricePerScroop = (Math.abs(price/serving));
  $("#discount").html("€" + pricePerScroop.toFixed(2));
  $(".scoop").click(getDiscount);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="from_price">&euro;49,90</div>
<div class="servingScoop">100 grams (14 servings) </div>
<button type="button" onclick="getDiscount()">get discount</button>
<div id="discount"></div>

Answer 1

Your logic is almost there but has three issues. Firstly you're replacing any non-digit character in the price string, so €49,90 becomes 4990. As such, you need to divide that by 100 to convert it to Euros from cents to use the value in the calculation.

Secondly, the Regex syntax for retrieving the number of servings is incorrect. You need to declare the regex without the parentheses and without attempting to access the 0th element. The regex itself should not include the last ) value as you've missed the word 'servings' which will mean it never hits.

Lastly, when you come to use that regex you just need to get the 1st match, not get all the matches and join/replace them.

With all that said, try this:

jQuery($ => {
  $('button').on('click', () => {
    var pattern = /[^0-9\.]/g;
    var pattern2 = /\((\d+)/;
    var price = parseFloat($(".from_price").text().replace(pattern, "")) / 100;
    var serving = parseFloat($(".servingScoop").text().match(pattern2)[1]);
    var pricePerScroop = Math.abs(price / serving);
    $("#discount").html("€" + pricePerScroop.toFixed(2));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="from_price">&euro;49,90</div>
<div class="servingScoop">100 grams (14 servings)</div>
<button type="button">get discount</button>
<div id="discount"></div>