Fatal编程技术网
  • javascript/
  • Javascript 在仍转义HTML时使用innerText设置文本样式

Javascript 在仍转义HTML时使用innerText设置文本样式

javascript html

Javascript 在仍转义HTML时使用innerText设置文本样式,javascript,html,Javascript,Html,我想用样式动态地设置p元素的文本，但我不知道怎么做 这是我的HTML元素： 以下是设置文本的当前代码： 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.` d

我想用样式动态地设置
p
元素的文本，但我不知道怎么做

这是我的HTML元素：

以下是设置文本的当前代码：

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.`

document.getElementById（“删除说话人信息”）.innerHTML=`是否确实要从${eventName}中删除${speakerName}？这是无法撤消的`
虽然上面的代码可以工作，但speakerName和eventName值是用户输入的，需要转义。我知道innerText可以做到这一点，但它也逃避了粗体标记。我确信有办法做到这一点，但我就是在网上找不到。谢谢你的帮助

您应该使用类似my
special
函数的功能：

/最好的选择是使用模板库。如果您试图推出自己的，您可能会把它搞砸，并最终与XSS漏洞。总有一个黑客会想到一些你没有想到的东西。使用库还可以让您做一些很好的事情，比如拥有一个html模板并传入变量以安全地插入其中

听起来您没有使用任何较大的框架，如React或Angular，因此我认为Lodash的
模板
函数是您最好的选择。以下是他们文档中的一个示例：


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



//使用HTML“转义”分隔符转义数据属性值。
var compiled=ux.template（“”）；
已编译（{'value'：'''}）；
//=>“脚本”

如果您使用的是jquery，则使用
text（）
清理-而不是转义-用户输入的文本，然后将其与HTML结合起来……或者对于javascript，使用
document.getElementById（“myspan”）.textContent=“newtext”可能重复的