用 ",' 和 \ 正确包装 javascript 连接的 html答案

【问题标题】：Wrapping javascript concatenated html correctly with ",' and \用 ",' 和 \ 正确包装 javascript 连接的 html
【发布时间】：2016-12-03 19:31:33
【问题描述】：

我在尝试创建的网页中正确显示消息时遇到了一些问题。我的代码是：

content.innerHTML += "<button 'onclick=\"likeFunction(" + feed.messages[y]._id + ")\">" + "Like(" + feed.messages[y].likesCount + ")" + "</button>"

当我检查页面源中的元素时，我得到了以下输出：

<button 'onclick="like(idOfObject)">Likes(likeNumber)</button>

我需要的是：

<button 'onclick="like("idOfObject")">Likes(likeNumber)</button>

我对如何添加更多单引号或双引号以及在何处正确转义以获得所需的输出感到有些困惑。

【问题讨论】：

onclick前有个逗号'onclick="..."
用"包围onclick函数，然后用'包围likeFunction里面的每个参数
@Icepickle 有了你的评论，我得到了这么多： content.innerHTML += ""。在输出中，我将其作为字符串发送，但发送的字符串是文字变量，而不是变量内的数据。

标签： javascript html html-escape-characters

【解决方案1】：

我想我看到了一些错别字。最明显的是 onclick 前面的前导 '。我不认为这需要在这里。

至于格式化字符串，请考虑查看 ES6 中引入的template literals。

可能看起来像这样：

content.innerHTML += `<button onclick="likeFunction(${idOfObjectVariable})">Likes (${likeCountVariable})</button>`

希望对你有帮助

【讨论】：

【解决方案2】：

你离得太近了！首先，您需要删除' 之前的onclick。如果您想在idOfObject 周围添加双引号，那么您只需在likeFunction( 之后转义一个双引号，在)\">" 之前转义一个双引号。

"<button onclick=\"likeFunction(\"" + feed.messages[y]._id + "\")\">"

唯一的问题是，当您的变量 idOfObject 周围的双引号呈现时，它们将对应于您已经拥有的 onclick 的开始和结束引号。因此，您的解决方案应该在双引号内包含单引号：

"<button onclick=\"likeFunction(\'" + feed.messages[y]._id + "\')\">"

【讨论】：

【解决方案3】：

我猜你想要的 HTML 是：

<button onclick="like('idOfObject')">7</button>

或

<button onclick='like("idOfObject")'>7</button>

您可能不想引用整个点击属性，只引用 = 右侧的部分。

content.innerHTML += "<button onclick=\"like('" + feed.messages[y]._id + "')\">" + ...

我猜你可能也不希望向用户显示看起来像函数的东西，而是函数调用的结果，但这不是你要问的。

【讨论】：

【解决方案4】：

您不应该从不受信任的输入手动连接 html（假设有人将恶意 html 代码注入到您的 feed.messages[y]._id 或其他字段）。消毒是您的选择之一，但这就像修补一个大洞。您可以阅读有关防止名为 XSS here 的安全攻击的更多信息。

考虑使用 createElement API 手动创建 DOM 并手动绑定事件处理程序。

function renderButton(content, feed, y) {
    function likeFunction() {
      alert("LIKE" + feed.messages[y]._id);
    };

    var button = document.createElement("button");
    var text = document.createTextNode("Like(" + feed.messages[y].likesCount + ")");
    button.appendChild(text);
    button.addEventListener('click', likeFunction)
    content.appendChild(button);
}

然后你可以通过一个简单的函数调用来渲染你的按钮。

renderButton(content, feed, 0)

【讨论】：