Sim isso é possivel. A maneira mais fácil é usando o eval();
.
HTML
<input type="text" id="calculator" />
<div id="result"></div>
javascript
var input = document.getElementById('calculator');
var result = document.getElementById('result');
input.addEventListener('keyup', calcular);
function calcular(){
var conta = eval(this.value);
result.innerHTML = conta;
}
O exemplo em cima agarra um oscultador de evento keyup
e corre uma função cada vez que uma tecla fôr libertada (keyup).
Essa função corre o eval()
que no fundo corre essa string como código.
Existem outras maneiras mais seguras e trabalhosas, isso implica regex para detetar operadores como divisão, multiplicação, etc. Mas penso que este exemplo responde ao que pergunta.
Sem eval()
:
Tenho de deixar um parentesis: o eval() é uma das ferramentas mais poderosas do JavaScript é pode ser muito util, mas em alguns casos levanta problemas de segurança.
(Mais sobre isso nesta resposta)
Se quiser fazer o mesmo sem o eval, o código fica bem mais extenso. Por curiosidade fiz à mão um código para resolver isto. Talvez dê para economizar algumas linhas mas não será muito mais pequeno sem o uso do eval(). Porem este exemplo (http://jsfiddle.net/n34PT/) é eval-free:
var input = document.getElementById('calculator');
input.addEventListener('keyup', calcular);
function calcular(e) {
calculadora(e.target.value);
}
var conta = 0;
var operadores = ['*', '/', '+', '-', ];
var operacoes = [
function (a, b) {
return a * b;
},
function (a, b) {
return a / b;
},
function (a, b) {
return a + b;
},
function (a, b) {
return a - b;
}];
var stop = 0;
function resolverParentesis(eq) {
return eq.replace(/\(.*\)/, function (match) {
return calculadora(match.substring(1, match.length - 1));
});
}
function calculadora(pedido) {
if (pedido.match(/[*\/+\-]$/)) return;
var pedido = pedido.replace(/\s/g, '');
pedido = resolverParentesis(pedido);
if (!/[*\/+\-]/.test(pedido)) return resultado(pedido);
var regex = /[*\/]/.test(pedido) ? new RegExp("([^\/*+\-]*[*\/][^\/*+\-]*)") : new RegExp("([^\/*+\-]*[+\-][^\/*+\-]*)");
pedido = processar(pedido, regex);
if (/[*\/+\-]/.test(pedido)) return calculadora(pedido);
return resultado(pedido);
}
function processar(input, regex) {
return input.replace(regex, function (str) {
var op = str.match(/([*\/+\-])/)[0];
var pedacos = str.split(op);
var fn = operacoes[operadores.indexOf(op)];
return fn(pedacos[0] * 1, pedacos[1] * 1);
});
}
function resultado(conta){
var result = document.getElementById('result');
result.innerHTML = conta
}