Your CSP blocks eval. So I wrote a parser.
I needed a graphing calculator that plots sin(2x) + x^2 while you type. The obvious implementation is one line: const y = eval ( expression . replace ( / x / g , String ( x ) ) ) ; It is also the one line that cannot ship, because the page sends this header: Content - Security - Policy : script - src 'self' ; object - src 'none' ; No 'unsafe-eval' , so eval and new Function throw. That is not an…
The author wanted a graphing calculator that could plot expressions like sin(2x) + x^2 while the user typed them in. The obvious solution was to create a one-line function using eval: const y = eval(expression.replace(/x/g, String(x))); However, this approach was not viable due to the Content-Security-Policy headers that disallow script-src self and object-src none, thereby preventing eval from executing. The author needed to implement a proper expression parser instead, which proved to be a challenging task.
The parser consists of four stages: tokenization, conversion to Reverse Polish Notation (RPN), and evaluation. The first stage, tokenization, involves breaking down the input string into individual tokens such as numbers, identifiers, operators, and parentheses. The author created utility functions isDigit and isAlpha to identify digits and alphabetic characters in the input string. The tokenize function iterates through the input character by character, building up tokens based on the identified characters and operators.
The second stage, conversion to RPN, involves transforming the token list into a reverse polish notation queue. RPN is a mathematical notation in which operators follow their operands, removing the need for parentheses. This stage enables the expression to be evaluated more easily, as the order of operations is already determined.
The third stage is the evaluation of the RPN queue, which involves performing the mathematical operations in the correct order. The author aimed to make this process straightforward, as the primary challenge was determining the meaning of expressions like -3^2 and whether 2x should be treated as multiplication.
In summary, the author wrote an expression parser to circumvent the limitations imposed by the page's Content-Security-Policy headers and create a functional graphing calculator that could plot complex mathematical expressions as the user typed them in. The parser consisted of four stages: tokenization, conversion to RPN, and evaluation.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
