前端如何实现让用户自定义输入js代码并执行？

Question

应用场景如下：
页面中有多个输入框，用户可以给每个输入框自定义一个编码，例如#1,#2,另有一个让用户自定义输入代码的dialog，用户可以在里面输入js代码，以来控制几个输入框之间值的计算，或是控制当#1输入框的值不为空时，#2输入框变成disabled状态。想请问各位大佬以上场景能否实现？

Answer 1

标题描述的太奇怪了，看意思是要用户自定义算法
最简单的可以使用Mathjs，其中自带表达式功能

// expressions
math.evaluate('1.2 * (2 + 4.5)')     // 7.8
math.evaluate('12.7 cm to inch')     // 5 inch
math.evaluate('sin(45 deg) ^ 2')     // 0.5
math.evaluate('9 / 3 + 2i')          // 3 + 2i
math.evaluate('det([-1, 2; 3, 1])')  // -7

比如输入A * ( B + 3 )，输入框输入数据做一下过滤，然后AB占位符替换成其中的值，可以最大程度避免出现XSS，实现也比较容易。
其他交互的控制就很简单了。

Answer 2

如果只问这么简单，那就简单一点回答你：能

Answer 3

先考虑一个问题，输入框里运行输入的语句语法范围有哪些。总不会允许用户注册自己的Service Worker将所有数据包都转发吧？

实现还是比较容易的，无非就是编译原理。

如果在考虑了安全性之后，确实需要允许所有的语法，那么使用ES的解释库是一个简单的方法，比较流行的有acornjs；
如果能将语法范围控制在很小的范围，可以自己写一个，没必要加载那么大的库了。看你的需求描述只需要实现以下几个节点分析就行了：

• BinaryExpression
• ExpressionStatement
• Identifier
• IfStatement
• Literal
• MemberExpression

自己实现的好处是没必要分开实现Tokenization和Parsing，可以简化处理。

Answer 4

eval(prompt("给爷输入代码")) 不知道符不符合你的需求
或许可以描述地清楚些

Answer 5

通过eval或者new Function将输入的字符串转换成js代码后 添加change事件到对应的input里？

Answer 6

直接让用户输入需要计算的值不好？