Sum up html string numbers using javascript

Question

Hello I have a function that returns numbers inside a <p> tag with the following format:

<p class="numbers">123 + 456 + 789</p>

Is there any way I can do another function or something in javascript to sum up all the numbers and store it into a variable?

Thanks!

Answer 1

// Grab the element
const para = document.querySelector('.numbers');

// Convert the text content to an array and
// make the text number values into actual numbers
const numbers = para.textContent.split(' + ').map(Number);

// Use `reduce` to sum the numbers
const total = numbers.reduce((p, c) => p + c);

DEMO

Answer 2

This should do it:

var string = "<p class="numbers">123 + 456 + 789</p>";
var numbers = string.split(">")[1].split("<")[0].split("+");
var i = 0;
var sum = 0;
while(i < numbers.length){
    sum += parseInt(numbers[i]);
    i += 1;
}
return sum;

Answer 3

You can use Array.prototype.reduce()

var n = document.querySelector(".numbers").textContent;

var nums = n.replace(/\s/g, "").match(/^\d+|[+-]\d+/g);

var res = nums.reduce((a, b) => Number(a) + Number(b));

document.body.innerHTML += `=${res}`;

<p class="numbers">123 + 456 + 789</p>

Answer 4

var x = document.querySelector('.numbers').textContent.split("+").map(Number);

var y = x.reduce(function(add,num){return add+num})

console.log(y);