如何執行作為字符串一部分的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>";