JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<div>
    <input type="text" id='eval' value='sin(2^PI)' />
<span class='evalto'></span>

</div>
<span class='eval'></span>

JavaScript

var parse = function (s) {
    var b = "";
    var reg = new RegExp(('(\\d+|\\-|\\+|\\*|\\/|\\^|\\(|\\)|' + Object.getOwnPropertyNames(Math).join('|') + ")"), 'g');
    while (reg.test(s)) {
        s = s.replace(reg, function (m, n) {
            b += n;
            return "";
        });
    }
    s = b;

    return s;
};

var evaluate = function (a) {
    while (/\([^\(\)]+\)/g.test(a)) {
        a = a.replace(/\(([^\(\)]+)\)/g, function (e, f) {
            return evaluate(f);
        });
    }
    var mathnums = new RegExp("(" + Object.getOwnPropertyNames(Math).filter(function (e) {
        return typeof (Math[e]) == 'number';
    }).join('|') + ")", "gm");
    a = a.replace(mathnums, function (m, b) {
        return Math[b];
    });
    var mathfuns = new RegExp("(" + Object.getOwnPropertyNames(Math).filter(function (e) {
        return typeof (Math[e]) !== 'number';
    }).join('|') + ")\\s*([0-9]*[\\.]?[0-9]+)\\s*", "gm");
    a = a.replace(mathfuns, function (m, b, d) {
        return Math[b](d);
    });
    a = a.replace(/([0-9]*[\.]?[0-9]+)\s*[\^]\s*([0-9]*[\.]?[0-9]+)/g, function (m, b, d) {
        return Math.pow(b, d);
    });


    return (new Function("return " + a).bind(null))();

};
document.getElementById('eval').addEventListener('input', function (f) {
    [].slice.call(document.getElementsByClassName('eval')).forEach(function (b) {
        var p = parse(f.target.value);
        document.getElementsByClassName('evalto')[0].textContent = p;

        b.textContent = evaluate(p);
    });
});
var p = parse(document.getElementById('eval').value);
document.getElementsByClassName('evalto')[0].textContent = p;
document.getElementsByClassName('eval')[0].textContent = evaluate(p);