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

Question

I have a string called 'content' which contains HTML code. When a user clicks a button, the innerHTML of a div is set to the value of content however, if the string contains a function, I would like to execute it.

Example:

Function:

function state() {return "QLD";}

'content' string:

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

Current Output:

Example text here

state()

Desired Output:

Example text here

QLD

Answer 1

You can use the eval() function.

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

Of course, you'll have to figure out how to determine whether the string in your content contains a function and how to get just that string. Also, remember that eval() is evil (ie probably dangerous) with user content.

Answer 2

You can try to concatenate a variable in there... then load it like this

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


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

[Edited]

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

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

Answer 3

Using a template literal (also ECMAScript link ) you'd do:

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

But I don't know whether support for templates is sufficient for your purpose.

Answer 4

The latest convention is to use template literal (backticks)

function state() {return "QLD";}

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

console.log(content)

Answer 5

You can do this by checking for possible functions. When you find that possible function, attempt to execute it and replace with what the function returns. If the function does not exist, then just replace with what looked like a function. In this case, you can pass a scope where the function may exist, in case it does not exist on the global scope.

 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

Where are you getting the content string? Can you change that? The better design would be to split the data up. Here's an example...

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();

If the content is coming from an ajax call then have your PHP or whatever send you a JSON string

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

and then use JSON.parse to get the object

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

In this case you'll have to call the action differently

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

just replace your statements like this

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