EvaluaTEX N'th Root Fix

evaluatex_nth_root.html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.min.css" integrity="sha512-/MlSi6MBnEjKBuoY+vWZE8slTPRlkaKiE46RE0L1jQHodl48ndAOjkVB0GKXHwVmbQhpnVdCTzsjoDGgkbUjyg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.min.js" integrity="sha512-Qsh05D07P6dURSZn8Qk+j8GI7cEK0OhXleZvTofmucwoDSkBC0juWf1401JdSE8os2kWEezMu7e9mlnszm3yEw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/evaluatex.min.js" integrity="sha256-1eta1cT7ebUg7cdqiBAtbK0LLisgSTn+qbUORyAV4VQ=" crossorigin="anonymous"></script>


<span id="input"></span> = <span id="result"></span>
<p>Raw LaTex: <span id="preview"></span></p>
<p>Parsed: <span id="parsed"></span></p>
<button id="root3">\sqrt[3]{n}</button>
<button id="root4">\sqrt[4]{n}</button>
<button id="root5">\sqrt[5]{n}</button>

<script>
let calculator = evaluatex("0");

let input = document.getElementById('input');
let latex = 0;

let MQ = MathQuill.getInterface(2); // for backcompat
let mathField = MQ.MathField(input, {
    spaceBehavesLikeTab: true, // configurable
    handlers: {
        edit: function() { // useful event handlers
            latex = mathField.latex();
            document.getElementById("preview").innerText = latex;
            let parsed = rewriteRoots(latex);
            document.getElementById("parsed").innerText = parsed;
            let result;
            try{
                calculator = evaluatex(parsed, {}, {latex: true});
                result = calculateResult(calculator);
            }
            catch(e){
                result = e;
            }
            document.getElementById("result").innerText = result;
            document.getElementById("result").style.color = Number(result) === result ? "black" : "red";
        }
    }
});

function rewriteRoots(input){
    let exp = new RegExp(/\\sqrt\[/);
    let output = input;
    while ((match = exp.exec(output)) !== null) {
        //console.log(`Located n-th root at`, match.index);

        let found = false;
        let depth = 1;
        let j;
        for (let i=match.index+6; i<output.length; i++){
            //console.log(i, output[i]);
            if (output[i] == "["){
                depth += 1;
            }
            else if (output[i] == "]"){
                depth -= 1;
            }
            if (depth == 0){
                found = true;
                j = i;
                break;
            }
        }
        if (!found){
            throw Error("Square brackets weren't properly closed.");
        }
        //console.log("Found closing square bracket at", j);
        found = false;
        depth = 1;
        let k;
        for (let i=j+2; i<output.length; i++){
            if (output[i] == "{"){
                depth += 1;
            }
            else if (output[i] == "}"){
                depth -= 1;
            }
            if (depth == 0){
                found = true;
                k = i;
                break;
            }
        }
        if (!found){
            throw Error("Curly brackets weren't properly closed.");
        }
        //console.log("Found closing curly bracket at", k);

        // \sqrt[      ]{     }
        // i     i+6   j j+2  k
        // Becomes:
        // \left(  \right)^{\frac{1}{  }}
        let exponent = output.slice(match.index+6,j);
        let base = output.slice(j+2,k);
        //console.log(exponent, base);
        output = output.slice(0, match.index) + "\\left(" + base + "\\right)^{\\frac{1}{" + exponent + "}}" + output.slice(k+1);
        //console.log(output);
    }
    //console.log(output);
    return output;
}

function calculateResult(fn){
    return fn({x: 2, y: 3});
}

//let result = calculator({x: 2});

document.getElementById("root3").addEventListener("click", ()=>{mathField.write('\\sqrt[3]{}')});
document.getElementById("root4").addEventListener("click", ()=>{mathField.write('\\sqrt[4]{}')});
document.getElementById("root5").addEventListener("click", ()=>{mathField.write('\\sqrt[5]{}')});
MQ.StaticMath(document.getElementById("root3"));
MQ.StaticMath(document.getElementById("root4"));
MQ.StaticMath(document.getElementById("root5"));
</script>