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

您应该使用类似我的special函数的方法：

//<![CDATA[
/* external.js */
var doc, bod, I, special, unspecial; // for use on other loads
addEventListener('load', function(){
doc = document; bod = doc.body;
I = function(id){
  return doc.getElementById(id);
}
special = function(str){
  return str.replace(/&/g, '&amp;').replace(/'/g, '&apos;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}
unspecial = function(str){
  return str.replace(/&amp;/g, '&').replace(/&apos;/g, "'").replace(/&quot;/g, '"').replace(/&lt;/g, '<').replace(/&gt;/g, '>');
}
var speakerName = '<i>Cool Joe</i>', eventName = '<div>Keeping it Real</div>';
var deleteSpeakerInfoMsg = I('delete-speaker-info-message');
deleteSpeakerInfoMsg.innerHTML = 'Are you sure you want to delete <b>'+special(speakerName)+'</b> from <b>'+special(eventName)+'</b>? This cannot be undone.';
console.log(deleteSpeakerInfoMsg.innerHTML);
}); // end load
//]]>

<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
    <title>Test Template</title>
    <link type='text/css' rel='stylesheet' href='external.css' />
    <script type='text/javascript' src='external.js'></script>
  </head>
<body>
  <div id='delete-speaker-info-message'></div>
</body>
</html>

Answer 2

您最好的选择是使用模板库。如果尝试自己动手制作，可能会搞砸它并最终导致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>'

使用innerText设置文本样式，同时仍转义HTML

2 个答案: