使用 JavaScript 編碼 HTML
- 在 JavaScript 中使用字串替換對 HTML 進行編碼
-
使用 JavaScript 中的
charCodeAt函式對 HTML 進行編碼 -
在 JavaScript 中使用
createTextNode編碼 HTML -
在 JavaScript 中使用
He.js編碼 HTML
本文將介紹如何在 JavaScript 中對 HTML 字串進行編碼。我們將使用四種不同的方法，它們有共同的字串替換。
字串替換的目的是替換有潛在危險的字元。
在 JavaScript 中使用字串替換對 HTML 進行編碼
用字串置換的 HTML 編碼使用了 String.prototype.replace() 中的 replace() 方法。
replace() 方法將模式和替換作為引數並根據模式進行匹配。讓我們看一個例子，看看它是如何工作的。
在下面的示例程式碼中，我們定義了一個將 HTML 字串作為引數的函式。此函式將返回編碼的 HTML。
function htmlEncode(string) {
return string.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/'/g, ''')
.replace(/"/g, '"')
.replace(/\//, '/');
}
console.log(htmlEncode("<h1>Hello <span class='cool'>world</span> </h1>"));
輸出：
"<h1>Hello <span class='cool'>world</span> </h1>"
使用 JavaScript 中的 charCodeAt 函式對 HTML 進行編碼
charCodeAt 方法返回一個整數，表示索引處的 UTF-16 程式碼單元。這使得它非常適合在 HTML 中編碼某些字元。
我們在下面提供了一個示例程式碼，其中我們定義了一個將字串作為引數的函式。
我們在函式定義中設定了一個陣列作為緩衝區。因此，我們使用典型的 for 迴圈遍歷陣列。
在迴圈期間，我們使用 unshift 方法將一些字元新增到陣列的開頭。這些字元與 &#、charCodeAt 返回的整數和一個分號組合在一起。
我們在迴圈期間和函式返回時使用 join 函式將它們連線起來。
function encodeWithCharCode(string) {
let buffer = [];
for (let i = string.length-1; i>= 0; i--) {
buffer.unshift(['&#', string[i].charCodeAt(), ';'].join(''));
}
return buffer.join('');
}
console.log(encodeWithCharCode("<h1>Hello world</h1>"));
輸出：
"<h1>Hello world</h1>"
在 JavaScript 中使用 createTextNode 編碼 HTML
你可以使用 createTextNode 方法對給定的 HTML 進行編碼。該方法接受一個字串作為它在幕後編碼的引數。
之後，你可以獲取此編碼資料。你可以通過過程程式設計或函式來完成所有這些工作。
該函式將接受一個 HTML 字串作為引數。之後，它使用 createElement 建立一個元素，並使用 createTextNode 建立一個文字節點。
最後，該函式將此文字節點附加為建立元素的子節點，並通過 innerHTML 返回它。一直以來，createTextNode 對建立的文字進行編碼。
function encodeWithTextNode(htmlstring) {
let textarea = document.createElement('textarea');
let text = document.createTextNode(htmlstring);
textarea.appendChild(text);
return textarea.innerHTML;
}
console.log(encodeWithTextNode("<h1>Hello <span class='cool'>world</span> </h1>"));
輸出：
"<h1>Hello <span class='cool'>world</span> </h1>"
在 JavaScript 中使用 He.js 編碼 HTML
He.js 是 Mathias Bynens 建立的開源實體編碼器和解碼器。要開始使用 He.js 庫，請訪問 he.js GitHub 儲存庫。
到達那裡後，選擇你喜歡的下載選項。你可以在 HTML 程式碼中嵌入 He.js 作為替代選項。
你所要做的就是訪問 he.js 的 cdnjs 頁面並獲取你喜歡的 CDN 連結。
下一個程式碼塊展示瞭如何使用 he.js 對 HTML 字串進行編碼。
<body>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/he/1.2.0/he.min.js"
integrity="sha512-PEsccDx9jqX6Dh4wZDCnWMaIO3gAaU0j46W//sSqQhUQxky6/eHZyeB3NrXD2xsyugAKd4KPiDANkcuoEa2JuA=="
crossorigin="anonymous"
referrerpolicy="no-referrer">
</script>
<script type="text/javascript">
console.log(he.encode("<h1>Hello <span class='cool'>world</span> </h1>"));
</script>
</body>
輸出：
<h1>Hello <span class='cool'>world</span> </h1>
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn