11

Bom dia. Existe alguma forma de quando o usuário digitar isso em uma caixa de texto:

inserir a descrição da imagem aqui

Um script executar a conta automaticamente e resultar, neste caso, =1 ? É importante também que ele faça isso com todas as operações e que seja em javascript puro.

Obrigado.

3 Respostas 3

12

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

Exemplo: http://jsfiddle.net/4djdy/1

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
}
4

A resposta do sérgio usando eval é uma solução simples mas ela tem alguns problemas:

  • Segurança: o eval vai executar qualquer código Javascript, não só as expressões aritméticas. Você tem que tomar cuidado para que apenas valores escritos pelo próprio usuário sejam avaliados, para evitar vulnerabilidades de Cross Site Scripting (XSS).

  • O eval é uma caixa preta: ou ele retorna o resultado da conta ou nada. Em particular:

    • Você não tem controle sobre como as mensagens de erro são geradas.
    • Você não tem controle sobre como as contas são feitas e não pode definir os seus próprios operadores.

Se essas limitações forem importantes, uma alternativa é fazer as contas você mesmo. Construa um parser que converta o texto em uma árvore de sintaxe e avalie essa árvore. É um pouco comprido demais para descrever num post do SO, mas você encontra como fazer isso em diversos livros de algoritmos e pela internet (eu recomendaria um parser top-down - é mais fácil de programar na mão e as mensagens de erro são mais simples)

http://www.codeproject.com/Articles/318667/Mathematical-Expression-Parser-Using-Recursive-Des

3
  • Sobre a árvore de sintaxe, essa outra questão aqui do SOPT tem algumas informações que podem ser úteis. Não usa a mesma linguagem, mas a leitura da pergunta e da resposta podem fornecer algumas intuições importantes sobre a solução alternativa que o @hugomg sugeriu. :) Commented 3/08/2014 às 14:50
  • Hugo, o eval pode ser muito útil como no caso desta pergunta. Mas para completar a minha resposta juntei uma versão sem eval.
    – Sergio
    Commented 3/08/2014 às 20:54
  • 1
    No caso de criar um parser como sugerido aqui nesta resposta, vale uma olhada nas seguintes ferramentas: jison, esprima e peg.
    – bfavaretto
    Commented 4/08/2014 às 3:43
0

Baseada na resposta do Sergio, criei um exemplo mais simples sem o uso do eval().

var input = document.getElementById('calculator');
var result = document.getElementById('result');
input.addEventListener('keyup', calcular);
function calcular(){
    //var conta = eval(this.value);
    var conta = new Function("return " + this.value);
    var resultado = conta();
    
    result.innerHTML = resultado;
}
<input type="text" id="calculator" />
<div id="result"></div>

Neste caso uma function é criada com base na string enviada. Perceba que alguns erros aparecerão no console em alguns momentos, pois o tipo de retorno "1+1+", por exemplo, não é válido.

Neste caso, você poderia resolver com uma simples validação antes de criar a função. Isso resolveria o problema de "caixa preta" citado pelo hugomg em sua resposta. Mas ainda assim teríamos o problema do XSS.

Essa resposta tem apenas como finalidade somar conhecimento das diversas possibilidades possíveis de resolver seu problema de forma simples.

Aqui você pode encontrar muitos outros exemplos.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .