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>

Answer 2

您也可以使用<和>代替<和>：

var msg_1 = '&lt span class="red_text"&gtABC &lt/span&gt';
var msg_2 = '<b>' + msg_1 + '</b>';

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

.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标记的选择性渲染

2 个答案: