javascript - 纯 HTML 标签的选择性呈现

Question

请考虑下面的代码。

这是我需要发生的事情:

1.) 变量 msg_raw 中的 html 标签将呈现为纯 html。

2.) 变量 message 中的 html 标签将被应用，这意味着输出显示将具有红色 ABC文本和蓝色 <b>DEF</b>文本，如下所示:

ABC           <-- red colored text
<b>DEF</b>    <-- blue colored text

var msg_raw = '<b>DEF</b>';
var message = '<div class="red_text">ABC</div>';
message += '<div class="blue_text">' + msg_raw + '</div>';

$('#some_ID').html(message);

.red_text{ color: red; }
.blue_text{ color: blue; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="some_ID"></div>

Answer 1

插入 <b> 后作为 HTML，插入需要在其中的文本 .text :

var msg_1 = '<span class="red_text">ABC</span>';

$('#some_ID').html('<b/>');
$('#some_ID > b').text(msg_1);

.red_text{ color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="some_ID"></div>

要获得更动态的选项，您可以将 HTML 中具有特殊含义的所有字符替换为 msg_raw 中的 HTML 实体。在将其连接到 message 之前:

// https://stackoverflow.com/questions/18749591/encode-html-entities-in-javascript
var encodedStr = rawStr => rawStr.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
   return '&#'+i.charCodeAt(0)+';';
});

var msg_raw = '<b>DEF</b>';
var message = '<div class="red_text">ABC</div>';
message += '<div class="blue_text">' + encodedStr(msg_raw) + '</div>';

$('#some_ID').html(message);

.red_text{ color: red; }
.blue_text{ color: blue; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="some_ID"></div>