如何将textarea输入内容作为代码插入JavaScript函数中？

嘿，我完全get你的需求——就是想让用户在textarea里写的代码，直接像你手动写在run()函数内部的代码一样执行，而不是仅仅把输入内容当作字符串值来用对吧？

核心实现思路 #

要做到这一点，你需要让JavaScript动态执行用户输入的代码，最直接的方式就是用eval()函数或者Function构造函数。下面给你具体的实现代码和注意事项：

完整实现代码 #

<textarea id="input" rows="5" cols="30" placeholder="比如输入：console.log('我是用户写的代码！')"></textarea><br>
<button onclick="run()" id="run">RUN</button>

<script>
function run() {
  // 获取用户输入的代码内容
  const userCode = document.getElementById('input').value;
  
  // 先判断是否为空
  if (!userCode.trim()) {
    alert('请输入要执行的代码哦');
    return;
  }
  
  try {
    // 关键：把用户输入的内容当作代码直接执行
    eval(userCode);
    
    // 另一种可选方式：用Function构造函数，作用域是全局
    // new Function(userCode)();
  } catch (error) {
    // 捕获代码执行错误，给用户提示
    console.error('代码执行出错:', error);
    alert(`代码跑不起来哦：${error.message}`);
  }
}
</script>

效果说明 #

比如用户在textarea里输入console.log('Hello from user code!')，点击RUN按钮后，这段代码就会像你直接把它写在run()函数里一样，在控制台输出对应的内容，完全符合你要的“像在代码编辑器里编写的那样插入到代码里”的效果。

⚠️ 非常重要的安全提醒 #

这种方式风险极高！因为用户可以输入任意JavaScript代码，比如窃取页面数据、修改页面结构、发起恶意请求等。如果你的页面是公开面向用户的，一定要谨慎使用：

• 尽量只在本地调试、内部工具等信任环境下使用
• 如果必须公开使用，一定要做严格的代码过滤，只允许特定的操作（比如只允许调用指定函数）
• 永远不要在处理敏感数据的页面上使用这种功能

内容的提问来源于stack exchange，提问作者Emil E. Ohman