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

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

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

在頁面中顯示html代碼塊

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

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

直接把代碼用ps做成圖片上傳到網頁

用轉換符號

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


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

顯示效果：

符號和轉義符對照表

HTML字符實體 < >: &

在開發(fā)中遇到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，先看兩個函數(shù)的實現(xiàn)。

/**
 * @function escapeHTML 轉義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將< > & " "轉成字符實體

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

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

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

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

GPU云服務器云服務器在html中顯示日期 html塊頁面布局 js的值顯示在頁面上 html顯示煙花頁面

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

轉載請注明本文地址：http://systransis.cn/yun/110244.html

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

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

techstay 2019-08-21 17:00 評論0 收藏0
React.js 小書 Lesson27 - 實戰(zhàn)分析：評論功能（六）

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

Freeman 2019-08-21 17:33 評論0 收藏0
前端面試題收集，持續(xù)更新中

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

kgbook 2019-08-22 16:49 評論0 收藏0
前端面試題收集，持續(xù)更新中

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

2json 2019-08-29 15:12 評論0 收藏0
前端面試題收集，持續(xù)更新中

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

adam1q84 2019-08-02 10:17 評論0 收藏0