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

Question

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

例：

功能：

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

您可以尝试在其中连接变量...然后像这样加载它

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 3

使用模板文字 （也称为ECMAScript链接 ），您可以执行以下操作：

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

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

Answer 4

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

function state() {return "QLD";}

var content = `<div>Example text here</div><div><br></div><div>${state()}<br>/div>`;

console.log(content)

Answer 5

您可以通过检查可能的功能来做到这一点。 找到可能的函数后，尝试执行该函数并替换为该函数返回的内容。 如果该函数不存在，则只需替换为一个看起来像函数的函数即可。 在这种情况下，如果该函数不在全局范围内，则可以传递一个可能存在该功能的范围。

 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 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>";