如何执行作为字符串一部分的 Javascript 函数

Question

我有一个名为"content"的字符串，其中包含HTML代码。当用户单击按钮时，div 的 innerHTML 设置为内容值，但是，如果字符串包含函数，我想执行它。

例：

功能：

function state() {return "QLD";}

"内容"字符串：

var content = "<div>Example text here</div><div><br></div><div>state()<br>/div>";

电流输出：

此处的示例文本

状态（）

期望输出：

此处的示例文本

昆士兰州

Answer 1

您可以使用

eval()函数。

eval("2 + 2");             // returns 4

当然，您必须弄清楚如何确定内容中的字符串是否包含函数以及如何获取该字符串。 另外，请记住，用户内容eval()是邪恶的（即可能是危险的）。

Answer 2

使用模板文字（也是 ECMAScript 链接），你可以做到：

function state(){return 'QLD'}
var content = `<div>Example text here</div><div><br></div><div>${state()}<br>/div>`;
console.log(content)

但是我不知道对模板的支持是否足以满足您的目的。

Answer 3

最新的约定是使用模板文字（反引号）

function state() {return "QLD";}
var content = `<div>Example text here</div><div><br></div><div>${state()}<br>/div>`;
console.log(content)

Answer 4

您可以通过检查可能的功能来执行此操作。当您找到该可能的函数时，请尝试执行它并替换为该函数返回的内容。如果函数不存在，则只需替换为看起来像函数的内容即可。在这种情况下，您可以传递函数可能存在的作用域，以防它在全局作用域中不存在。

function checkFunctions(html, scope) {
  return html.replace(/(w+)()/g, function(match, capture) {
    try {
      return scope[capture]();
    } catch (e) {
      return match;
    }
  });
}
function state() {
  return "QLD";
}
var content = "<div>Example text here</div><div><br></div><div>state()<br></div>";
content = checkFunctions(content, this);
document.getElementById('foo').innerHTML = content;

<div id="foo"></div>

Answer 5

您可以尝试在那里连接一个变量...然后像这样加载它

var UI = {
  myLoad: () => {
     alert("works!");
  }
};

var myContent = "<span>" + UI.myLoad() + "</span>";

[已编辑]

var UI = {
      myLoad: () => {
	     return "QLD";
	  }
  };
  
  var myContent = "<span>" + UI.myLoad() + "</span>";
  
  myDv.innerHTML = myContent;

<div id='myDv'>&nbsp;</div>

Answer 6

你从哪里得到内容字符串？你能改变这一点吗？更好的设计是将数据拆分。下面是一个示例...

var content={
    html:'<div>Example text here</div><div><br></div><div id="jsContent"></div>',
    action:state
    actionTarget="jsContent"
}
 document.body.innerHTML+=content.html;
document.getElementById(content.actionTarget).innerHTML=content.action();

如果内容来自 ajax 调用，那么让您的 PHP 或其他任何东西向您发送一个 JSON 字符串

echo '{ "html":"<div id='jsContent'></div>", "action":"state", "actionTarget":"jsContent" }';

，然后使用 JSON.parse 获取对象

 var content=JSON.parse(ajax.resonseText);

在这种情况下，您必须以不同的方式调用操作

window[content.action]();// all functions belong to the window unless you say other wise, replace window with wherever your function is if it is somewhere else

Answer 7

像这样替换你的语句

function state() {return "QLD";}
var content = "<div>Example text here</div><div><br></div><div>"+state()+"<br>/div>";