时间戳

首页 > 解决方案 > 使用 innerText 设置文本样式，同时仍然转义 HTML

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

问题描述

我想动态设置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.`

虽然上面的代码有效，但扬声器名称和事件名称值是用户输入的，需要转义。我知道 innerText 可以做到这一点，但它也逃避了粗体标签。我确信有办法做到这一点，但我只是无法在网上找到它。谢谢您的帮助！

标签： javascripthtml

解决方案

你应该使用类似我的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>

推荐阅读