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

Question

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

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>

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

Answer 1

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

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

可能看起来像这样：

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

希望对您有所帮助

Answer 2

我猜到你在 HTML 中想要的是：

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

或

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

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

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

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

Answer 3

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

之前转义一个双引号

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

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

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

Answer 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)

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

Wrapping javascript concatenated html correctly with ",' and \

javascript

html

html-escape-characters