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

Question

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

One thing is that you have an extra { on $( document ).ready(function() { {. — WizardCoder
– WizardCoder, Commented Jul 5, 2017 at 12:49
Change var discount = "#discount"; by var discount = $("#discount").html(); — Bardo
– Bardo, Commented Jul 5, 2017 at 12:52
I think you must use $("#discount").html(); to get the value in your span, and the same thing for the discount value. — Ray Lloy
– Ray Lloy, Commented Jul 5, 2017 at 12:52
You also need to do price = price.replace('£', '') instead of discount = price.replace('/\D/g', '') because that regex is removing the decimal point, and you are also assigning the wrong variable there. — WizardCoder
– WizardCoder, Commented Jul 5, 2017 at 13:00

Dinesh undefined · Accepted Answer · 2017-07-05 12:54:06Z

1

syntax error . extra curly brace in document.ready
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

answered Jul 5, 2017 at 12:54

Dinesh undefined

5,5262 gold badges22 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

piotr Over a year ago

Hey Dinesh, your answer is almos complete I id not realised I was close to find solution. Thank you so much for your input.

Adrian · Accepted Answer · 2017-07-05 12:52:12Z

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); 
})

Philipp Wrann · Accepted Answer · 2017-07-05 13:00:05Z

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.

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related