純 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 實體， msg_raw再將其連接到message ：

 // https://stackoverflow.com/questions/18749591/encode-html-entities-in-javascript var encodedStr = rawStr => rawStr.replace(/[\ -\香<>\\&]/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>