Tukukkk

I'm trying to create a calculator that follows the bodmas rule and trying first with multiplication. When the equals button is hit a string such as "4*5+6*7" is stored in displayValue.
As a first attempt I use reg ex to search the string for the multiplication sign and it's position. When it finds the values to the lhs and rhs and stores that it cal. It then multiplies the values using firstValue, secValue and replaces cal with the result in displayValue. This works for 4*5, but I have to press equals again for it to do 6*7. I tried using a while loop but couldn't get it to work. How do I get it to do all the multiplication parts in the string in one go?

  equals() {

      const displayValue = this.state.displayValue.slice(0);

      let counter = displayValue.match(/[d.]+(?=*)*[d.]+/g).length;

      console.log("counter: " +counter);

      while (counter > 0) {

          let cal = displayValue.match(/[d.]+(?=*)*[d.]+/).toString().split("*").join(",");

           console.log("cal: " +cal)

           let operPos = cal.search(/*/);

           let firstValue = parseFloat(cal.slice(0, operPos));

           let secValue = parseFloat(cal.slice(operPos + 1));

           let finalCal = firstValue * secValue;

           let result = displayValue.replace(/[d.]+(?=*)*[d.]+/, finalCal);

           this.setState({displayValue: result});

           counter = counter -1;

           console.log("counterII: " +counter)

       }

     console.log("new display: " +this.state.displayValue)

}

The displayValue was not updating in each loop because I assigned it as a const variable. Here's the correct code:

equals() {

    let displayValue = this.state.displayValue.slice(0);

    let counter = displayValue.match(/[d.]+(?=*)*[d.]+/g).length;

    console.log("counter: " +counter);

    while (counter > 0) {

        let cal = displayValue.match(/[d.]+(?=*)*[d.]+/).toString().split("*").join(",");

        console.log("cal: " +cal)

        let operPos = cal.search(/*/);

        let firstValue = parseFloat(cal.slice(0, operPos));

        let secValue = parseFloat(cal.slice(operPos + 1));

        let finalCal = firstValue * secValue;

        displayValue = displayValue.replace(/[d.]+(?=*)*[d.]+/, finalCal);

        this.setState({displayValue: displayValue})

        console.log("result: " +displayValue)

        counter = counter -1;

        console.log("counterII: " +counter)

    }

}

If anyone has a better way to achieve the same thing please let me know.

Why not use the eval() operation? Ex:

document.getElementById("clickMe").onclick = function(){

  let foo = eval("2*4*2");

  console.log(foo);//16

  return;

}

<button id="clickMe">Click for Demo</button>

It can sometimes even parse a function too!
EDIT: This answer is no longer valid, as the asker intended to do step by step BEDMAS.

However, I will leave this on here for future readers.