如何在HTML文本框输入函数名调用JavaScript函数并返回结果

要实现输入myFunction()后调用函数并把返回的"Hello"添加到div里，可以按以下步骤操作：

1. 搭建基础HTML结构 #

先创建输入框、触发按钮和用来显示结果的容器：

<input type="text" id="funcInput" placeholder="输入函数名，比如myFunction()">
<button id="runBtn">执行函数</button>
<div id="resultDiv"></div>

2. 定义目标函数并编写执行逻辑 #

在JavaScript里先定义你的myFunction，然后监听按钮点击事件，获取输入框内容并执行，最后把结果插入到div中：

// 定义目标函数
function myFunction() {
  return "Hello";
}

// 获取页面元素
const input = document.getElementById('funcInput');
const runBtn = document.getElementById('runBtn');
const resultDiv = document.getElementById('resultDiv');

// 监听按钮点击事件
runBtn.addEventListener('click', function() {
  const funcStr = input.value.trim();
  if (!funcStr) return;

  try {
    // 执行输入的函数代码
    const result = eval(funcStr);
    // 将结果添加到div中
    resultDiv.textContent = `执行结果：${result}`;
  } catch (error) {
    // 处理执行错误，比如输入的不是有效函数
    resultDiv.textContent = `执行出错：${error.message}`;
  }
});

3. 规避安全风险 #

⚠️ 上面用了eval()函数，它会直接执行输入的任意代码，在生产环境中非常危险——如果用户输入恶意代码，会导致安全问题。如果只允许调用特定的几个函数，可以做个白名单限制：

// 允许调用的函数白名单
const allowedFunctions = {
  myFunction,
  // 可以添加其他允许的函数
};

runBtn.addEventListener('click', function() {
  const funcStr = input.value.trim();
  if (!funcStr) return;

  // 提取函数名，比如从"myFunction()"中取出"myFunction"
  const funcNameMatch = funcStr.match(/^(\w+)\(\)$/);
  if (!funcNameMatch) {
    resultDiv.textContent = "请输入正确的函数调用格式，比如myFunction()";
    return;
  }

  const funcName = funcNameMatch[1];
  if (allowedFunctions[funcName]) {
    // 调用白名单内的函数
    const result = allowedFunctions[funcName]();
    resultDiv.textContent = `执行结果：${result}`;
  } else {
    resultDiv.textContent = `不允许调用函数：${funcName}`;
  }
});

这样既实现了需求，又能避免恶意代码执行的风险。

内容的提问来源于stack exchange，提问作者Yrezom