#react# 在頁面中顯示html代碼塊

在頁面中顯示html代碼塊

在網上查了下，說有一下方法能夠把html代碼直接在頁面中輸出。

1. textarea 不讓編輯 去邊框 去滾動條
2. <xmp></xmp>
3. 直接把代碼用ps作成圖片上傳到網頁
4. 用轉換符號

在jsx中前面3中都被實驗失敗，只有第四種成功了。

<code>
    <span>&lt;</span>
    <span>Button type="primary">Primary</span>
    <span>&lt;</span>
    <span>/Button></span>
</code>

顯示效果：

符號和轉義符對照表

HTML字符實體 < &gt: &amp

在開發中遇到javascript從後臺獲取的url 會被轉義，如：http://localhost:8080/Home/Index?a=14&b=15&c=123，想把它轉成http://localhost:8080/Home/Index?a=14&b=15&c=123

解決方案：
轉義分爲escapeHTML和unescapeHTML，先看兩個函數的實現。

/**
 * @function escapeHTML 轉義html腳本 < > & " '
 * @param a -
 *            字符串
 */
escapeHTML: function(a){
    a = "" + a;
    return a.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");;
},
/**
 * @function unescapeHTML 還原html腳本 < > & " '
 * @param a -
 *            字符串
 */
unescapeHTML: function(a){
    a = "" + a;
    return a.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&quot;/g, '"').replace(/&apos;/g, "'");
},

1. escapeHTML將< > & " '轉成字符實體

使用場景：
（1）用戶在頁面中錄入（好比輸入框） <script>alert(2);</script>， js將該內容提交給後端保存
（2）顯示時，後端將字符串返回前端；js接收到以後：

a, 使用escapeHTML，將字符串轉爲 <script>alert(2);</script>此時，瀏覽器將能正確解析，由於瀏覽器接收到實體字符後，轉成對應的尖括號等。
b, 不使用escapeHTML，瀏覽器一看到<，便認爲是html標籤的開始，直接把剛纔的字符串當腳本執行了，這就是xss漏洞。

1. unescapeHTML將字符實體轉成< > & " '

使用場景：
後端將已經轉義後的內容顯示到頁面；好比<script>alert(2);</script>
js收到後：
a，前端進行unescapeHTML，則能夠直接dom操做，將標籤顯示到頁面。
b，前端沒有unescapeHTML，則原樣輸出<script>alert(2);</script>，但此時並無執行。