亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

luzhuqun / 1218人閱讀

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

在頁面中顯示html代碼塊

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

textarea 不讓編輯 去邊框 去滾動條

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

用轉(zhuǎn)換符號

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


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

顯示效果：

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

HTML字符實體 < >: &

在開發(fā)中遇到javascript從后臺獲取的url 會被轉(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，先看兩個函數(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)成字符實體

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

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/110244.html

相關(guān)文章

  • React 可視化開發(fā)工具 shadow-widget 最佳實踐（上）

    摘要：上例的功能塊定義了如下節(jié)點樹入口節(jié)點是面板，結(jié)合該節(jié)點的函數(shù)書寫特點，我們接著介紹最佳實踐如何處理功能塊之內(nèi)的編程。 本文介紹 React + Shadow Widget 應用于通用 GUI 開發(fā)的最佳實踐，只聚焦于典型場景下最優(yōu)開發(fā)方法。分上、下兩篇講解，上篇概述最佳實踐，介紹功能塊劃分。 showImg(https://segmentfault.com/img/bVWu3d?w=6...

    techstay 評論0 收藏0

  • React.js 小書 Lesson27 - 實戰(zhàn)分析：評論功能（六）

    摘要：所以我們給評論組件加上刪除評論的功能，這樣就可以刪除不想要的評論了。輸入這是代碼塊，這是正常內(nèi)容。到目前為止，第二階段的實戰(zhàn)已經(jīng)全部完成，你可以在這里找到完整的代碼。下一節(jié)中我們將介紹小書高階組件。 React.js 小書 Lesson27 - 實戰(zhàn)分析：評論功能（六） 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson27 ...

    Freeman 評論0 收藏0

  • 前端面試題收集，持續(xù)更新中

    摘要：對于所訪問的每個元素，函數(shù)應該將該元素傳遞給所提供的回調(diào)函數(shù)。 HTML 在線閱讀Github地址 題目列表 HTML HTML和XHTML的區(qū)別 Html的語義化 Doctype的文檔類型 cookie、sessionSttorage、localStory區(qū)別 HTML全局屬性(global attribute)有哪些？ 常見的瀏覽器內(nèi)核有哪些？ 介紹一下你對瀏覽器內(nèi)核的理解？...

    kgbook 評論0 收藏0

  • 前端面試題收集，持續(xù)更新中

    摘要：對于所訪問的每個元素，函數(shù)應該將該元素傳遞給所提供的回調(diào)函數(shù)。 HTML 在線閱讀Github地址 題目列表 HTML HTML和XHTML的區(qū)別 Html的語義化 Doctype的文檔類型 cookie、sessionSttorage、localStory區(qū)別 HTML全局屬性(global attribute)有哪些？ 常見的瀏覽器內(nèi)核有哪些？ 介紹一下你對瀏覽器內(nèi)核的理解？...

    2json 評論0 收藏0

  • 前端面試題收集，持續(xù)更新中

    摘要：對于所訪問的每個元素，函數(shù)應該將該元素傳遞給所提供的回調(diào)函數(shù)。 HTML 在線閱讀Github地址 題目列表 HTML HTML和XHTML的區(qū)別 Html的語義化 Doctype的文檔類型 cookie、sessionSttorage、localStory區(qū)別 HTML全局屬性(global attribute)有哪些？ 常見的瀏覽器內(nèi)核有哪些？ 介紹一下你對瀏覽器內(nèi)核的理解？...

    adam1q84 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<