CODEWITHSUNDEEP
javascriptjquery
piotr
piotr

Reputation: 85

Jquery - How do I extract and calculate numeric values from string

I need some assistance with extracting and calculation numeric values from the the strings based on id assigned to span text tags. For example I need to calculate 5% discount and display correct amount in another field.

  <span id="discount">5% off<span>
    <span id="price">£2.75</span>/per month</span> 

$( document ).ready(function() { {
    var discount= "#discount"; // a string
    discount= discount.replace(/\D/g, ''); // a string of only digits, or the empty string
    var discount= parseInt(discount, 10); // now it's a numeric value

    var price= "#price"; // a string
    price= price.replace(/\D/g, ''); // a string of only digits, or the empty string
    var discount= parseInt(price, 10); // now it's a numeric value

    var discountValue = (discount * price) / 100;
    var newPrice= price + discount;
    $("#price").text(newPrice); 
})

I am not an experet of Jquery and JavaScript thus please understand my limited knowledge and I do appreciate if someone could explain how to achieve expected solution. Thanks

Upvotes: 0

Views: 560

Answers (3)

Philipp Wrann
Philipp Wrann

Reputation: 1849

I would really suggest to solve this in the business logic, not with jquery in the frontend.

$(function(){
    var pattern = /[^0-9\.]/g;
    var discount = parseFloat($('#discount').html().replace(pattern, ""));
    var price = praseFloat($('#price').html().replace(pattern, ""));
    var result = price - price * (discount/100);
    console.log(result);
});

update:

without jquery:

(function(d){
    var pattern = /[^0-9\.]/g;
    var discount = parseFloat(d.querySelector('#discount').innerHTML.replace(pattern, ""));
    var price = praseFloat(d.querySelector('#price').innerHTML.replace(pattern, ""));
    var result = price - price * (discount/100);
    console.log(result);
}(document);

Why use a the self-executing anonymous function? To keep the global scope clean and make garbage collection of those vars possible.

Upvotes: 0

Dinesh undefined
Dinesh undefined

Reputation: 5546

  1. syntax error . extra curly brace in document.ready
  2. Use jquery selector to get text of span using $("#discount").text();

$( document ).ready(function() { 
    var discount= $("#discount").text(); // a string
   
   discount= discount.replace(/\D+/g, '');
   
    // a string of only digits, or the empty string
    var discount= parseInt(discount, 10); // now it's a numeric value

    var price= $("#price").text(); // a string
    price= price.replace(/\D/g, ''); // a string of only digits, or the empty string
    var discount= parseInt(price, 10); // now it's a numeric value

    var discountValue = (discount * price) / 100;
    var newPrice= price + discount;
    $("#price").text(newPrice); 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="discount">5% off</span>
<span id="price">£2.75</span>/per month

Upvotes: 1

Adrian
Adrian

Reputation: 8597

Assuming your inputs (Price and Discount) are input based entries, you can extract the numbers from a string using provided Regex (assuming only 1 set of number is present at a time).

$( document ).ready(function() { 
    var discount= $("#discount").text(); // a string
    discount = Regex.Replace(discount, @"[^\d]", ""); // a string of only digits, or the empty string
    discount = parseInt(discount); // now it's a numeric value

    var price= $("#price").text(); // a string
    price = Regex.Replace(price, @"[^\d]", ""); // a string of only digits, or the empty string
    price = parseFloat(price); // now it's a numeric value

    var discountValue = (discount * price) / 100;
    var newPrice = price + discount;
    $("#price").text(newPrice); 
})

Upvotes: 0

Related Questions