jQuery loop through strings calculate percentage discount from string values

Question

I'm currently trying to calculate the percentage off -- or difference in percent between two prices on a web store. I also need to be able to loop through all items on the page that have the same classname applied.

Inside the class name div there is some text contained in an empty that needs to be trimmed in order to calculate the percentage. So, I have to remove the text part of the string, keep the numbers and do the math.

The HTML output I'm working with looks like this:

<div class="price-wrap">
   <div class="price regular-price">
      <span>Retail Price:</span>
      $549.00
   </div>
   <div class="price sale-price">
      <span>Our Price:</span>
      $489.00
   </div>
</div>

I'm using the following jQuery to isolate the price values (numeric) for the sale price and regular price using "parseInt" to get rid of the text:

var regPrice = parseInt($('.regular-price').text().replace(/[^0-9.]/g, ""));
var salePrice = parseInt($('.sale-price').text().replace(/[^0-9.]/g, ""));

This is producing the values that I am expecting. Where I'm running into an issue is how to create a calculation using these var's that will loop through all ".regular-price" and ".sale-price" classes on the page and produce a percentage result.

I have tried using the "each" function to accomplish my result:

$('.sale-price').each(function(index) {
    console.log( ((regPrice - salePrice) / (regPrice)) * 100%) );
 });

But the console is empty.

I would just like to be able to calculate the percentage diff between the two numbers while looping through all items and write to the console until I decide where to put the value.

Thanks.

Answer 1

There is a possibility that there are multiple elements with the same class on the page.

You will have to find the closest parent that encompasses both the pricing information and use this to target the element within the container.

$('#button').on('click', () => {
    $('.price-wrap').each(function($elem) {
    debugger;
        let $regPrice = $('.regular-price', this);
        let $salePrice = $('.sale-price', this);
        
        let regPrice = getParsedPrice($regPrice);
        let salePrice = getParsedPrice($salePrice);
        
        let discount = ((regPrice - salePrice) / (regPrice)) * 100;
        
        discount = discount > 0 ? discount : 0;

        $('.discount', this).text(`$${discount.toFixed(2)}%`)
    });
});

function getParsedPrice($elem) {
  return parseInt($elem.text().replace(/[^0-9.]/g, ""), 10);
}

.price-wrap {
  margin-bottom: 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="price-wrap">
  <div class="price regular-price">
    <span>Retail Price:</span> $549.00
  </div>
  <div class="price sale-price">
    <span>Our Price:</span> $489.00
  </div>
  <div class="price">
    <span>Discount:</span><span class="discount"></span>
  </div>
</div>
<div class="price-wrap">
  <div class="price regular-price">
    <span>Retail Price:</span> $753.00
  </div>
  <div class="price sale-price">
    <span>Our Price:</span> $620.00
  </div>
  <div class="price">
    <span>Discount:</span><span class="discount"></span>
  </div>
</div>
<button id="button">Calculate Discount</button>

Answer 2

You need to move your variable declarations into the loop so that when there are many retail and sale prices, the variables get reset to the current values. You also need to use the index to get the associated regular price.

You can then wrap this in a JQuery object when you want the current sale price that the loop is iterating.

Then, remove the % after 100 and add another ( in the console.log statement.

I would also strongly suggest that you put the prices into their own elements, like a div which would make extracting the numbers much simpler.

$('.sale-price').each(function(index) {
  var regPrice = parseInt($($('.regular-price')[index]).text().replace(/[^0-9.]/g, ""));
  var salePrice = parseInt($(this).text().replace(/[^0-9.]/g, ""));
  console.log(( ((regPrice - salePrice) / (regPrice)) * 100) );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="price-wrap">
   <div class="price regular-price">
      <span>Retail Price:</span>
      $549.00
   </div>
   <div class="price sale-price">
      <span>Our Price:</span>
      $489.00
   </div>
</div>

Answer 3

I created a function that use regular expression to extract the price from the element. Then I made a small algorithm that calculate the percentage of discount. Moreover, I added the possibility that the price is higher than the competition in order to return a discount of 0% instead a negative value.

function getPrice(elem){
  return elem.match(/\d+.\d{2}/);
}

function getDiscount(regPrice, salePrice){
  let disc = (regPrice - salePrice) * 100 / regPrice;
  return disc < 0 ? 0 : disc;
}

let $regPrice = $('.regular-price');
let $salePrice = $('.sale-price');

$regPrice.each(function(k, v){
  let regPrice = getPrice($regPrice[k].innerHTML);
  let salePrice = getPrice($salePrice[k].innerHTML);
  let discount = getDiscount(regPrice, salePrice);
  console.log(discount.toFixed(2) + '% of discount!');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="price-wrap">
  <div class="price regular-price">
    <span>Retail Price:</span> $549.00
  </div>
  <div class="price sale-price">
    <span>Our Price:</span> $489.00
  </div>
</div>
<div class="price-wrap">
  <div class="price regular-price">
    <span>Retail Price:</span> $569.00
  </div>
  <div class="price sale-price">
    <span>Our Price:</span> $459.00
  </div>
</div>
<div class="price-wrap">
  <div class="price regular-price">
    <span>Retail Price:</span> $369.00
  </div>
  <div class="price sale-price">
    <span>Our Price:</span> $459.00
  </div>
</div>