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

luzhuqun 發(fā)布于2019-08-26 18:28 / 1135人閱讀

摘要：在頁面中顯示代碼塊在網(wǎng)上查了下，說有一下方法可以把代碼直接在頁面中輸出。將字符實(shí)體轉(zhuǎn)成使用場景后端將已經(jīng)轉(zhuǎn)義后的內(nèi)容顯示到頁面比如收到后，前端進(jìn)行，則可以直接操作，將標(biāo)簽顯示到頁面。

在頁面中顯示html代碼塊

在網(wǎng)上查了下，說有一下方法可以把html代碼直接在頁面中輸出。

textarea 不讓編輯去邊框去滾動(dòng)條

直接把代碼用ps做成圖片上傳到網(wǎng)頁

用轉(zhuǎn)換符號(hào)

在jsx中前面3中都被實(shí)驗(yàn)失敗，只有第四種成功了。


    <
    Button type="primary">Primary
    <
    /Button>

顯示效果：

符號(hào)和轉(zhuǎn)義符對照表

HTML字符實(shí)體 < >: &

在開發(fā)中遇到j(luò)avascript從后臺(tái)獲取的url 會(huì)被轉(zhuǎn)義，如：http://localhost:8080/Home/Index?a=14&b=15&c=123，想把它轉(zhuǎn)成http://localhost:8080/Home/Index?a=14&b=15&c=123

解決方案：
轉(zhuǎn)義分為escapeHTML和unescapeHTML，先看兩個(gè)函數(shù)的實(shí)現(xiàn)。

/**
 * @function escapeHTML 轉(zhuǎn)義html腳本 < > & " "
 * @param a -
 *            字符串
 */
escapeHTML: function(a){
    a = "" + a;
    return a.replace(/&/g, "&").replace(//g, ">").replace(/"/g, """).replace(/"/g, "'");;
},
/**
 * @function unescapeHTML 還原h(huán)tml腳本 < > & " "
 * @param a -
 *            字符串
 */
unescapeHTML: function(a){
    a = "" + a;
    return a.replace(//g, ">").replace(/&/g, "&").replace(/"/g, """).replace(/'/g, """);
},

escapeHTML將< > & " "轉(zhuǎn)成字符實(shí)體

使用場景：
（1）用戶在頁面中錄入（比如輸入框）， js將該內(nèi)容提交給后端保存
（2）顯示時(shí)，后端將字符串返回前端；js接收到之后：

a, 使用escapeHTML，將字符串轉(zhuǎn)為 此時(shí)，瀏覽器將能正確解析，因?yàn)闉g覽器接收到實(shí)體字符后，轉(zhuǎn)成對應(yīng)的尖括號(hào)等。
b, 不使用escapeHTML，瀏覽器一看到<，便認(rèn)為是html標(biāo)簽的開始，直接把剛才的字符串當(dāng)腳本執(zhí)行了，這就是xss漏洞。

unescapeHTML將字符實(shí)體轉(zhuǎn)成< > & " "

使用場景：
后端將已經(jīng)轉(zhuǎn)義后的內(nèi)容顯示到頁面；比如
js收到后：
a，前端進(jìn)行unescapeHTML，則可以直接dom操作，將標(biāo)簽顯示到頁面。
b，前端沒有unescapeHTML，則原樣輸出，但此時(shí)并沒有執(zhí)行。