javascript - 在转义 HTML 的同时使用 innerText 设置文本样式

Question

我想动态设置 p 的文本带有样式的元素，但我不知道该怎么做。

这是我的 HTML 元素:<p id="delete-speaker-info-message"> </p>

这是我当前设置文本的代码:

document.getElementById("delete-speaker-info-message").innerHTML = `Are you sure you want to delete <b>${speakerName}</b> from <b>${eventName}</b>? This cannot be undone.`

虽然上面的代码有效，但 speakerName 和 eventName 值是用户输入的，需要进行转义。我知道 innerText 可以做到这一点，但它也会转义粗体标签。我确信有办法做到这一点，但我只是无法在网上找到它。感谢您的帮助!

Answer 1

最好的办法是使用模板库。如果您尝试自己推出，您可能会把它搞砸并最终导致 XSS 漏洞。总有黑客会想出你想不到的东西。使用库还可以让您做一些不错的事情，例如拥有一个 html 模板并传入变量以安全地插入其中。

听起来您没有使用任何较大的框架，例如 React 或 Angular，所以我认为 Lodash 的 template 函数是您最好的选择。这是他们文档中的示例:

// Use the HTML "escape" delimiter to escape data property values.
var compiled = _.template('<b><%- value %></b>');
compiled({ 'value': '<script>' });
// => '<b>&lt;script&gt;</b>'