使用 JavaScript 編碼 HTML

Habdul Hazeez 2023年1月30日 2022年5月5日
  1. 在 JavaScript 中使用字串替換對 HTML 進行編碼
  2. 使用 JavaScript 中的 charCodeAt 函式對 HTML 進行編碼
  3. 在 JavaScript 中使用 createTextNode 編碼 HTML
  4. 在 JavaScript 中使用 He.js 編碼 HTML
使用 JavaScript 編碼 HTML

本文將介紹如何在 JavaScript 中對 HTML 字串進行編碼。我們將使用四種不同的方法,它們有共同的字串替換。

字串替換的目的是替換有潛在危險的字元。

在 JavaScript 中使用字串替換對 HTML 進行編碼

用字串置換的 HTML 編碼使用了 String.prototype.replace() 中的 replace() 方法

replace() 方法將模式和替換作為引數並根據模式進行匹配。讓我們看一個例子,看看它是如何工作的。

在下面的示例程式碼中,我們定義了一個將 HTML 字串作為引數的函式。此函式將返回編碼的 HTML。

function htmlEncode(string) {
  return string.replace(/&/g, '&')
  			.replace(/</g, '&lt;')
  			.replace(/>/g, '&gt;')
  			.replace(/'/g, '&#39;')
  			.replace(/"/g, '&#34;')
  			.replace(/\//, '&#x2F;');
}

console.log(htmlEncode("<h1>Hello <span class='cool'>world</span> </h1>"));

輸出:

"&lt;h1&gt;Hello &lt;span class=&#39;cool&#39;&gt;world&lt;&#x2F;span&gt; &lt;/h1&gt;"

使用 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>"));

輸出:

"&#60;&#104;&#49;&#62;&#72;&#101;&#108;&#108;&#111;&#32;&#119;&#111;&#114;&#108;&#100;&#60;&#47;&#104;&#49;&#62;"

在 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>"));

輸出:

"&lt;h1&gt;Hello &lt;span class='cool'&gt;world&lt;/span&gt; &lt;/h1&gt;"

在 JavaScript 中使用 He.js 編碼 HTML

He.js 是 Mathias Bynens 建立的開源實體編碼器和解碼器。要開始使用 He.js 庫,請訪問 he.js GitHub 儲存庫

到達那裡後,選擇你喜歡的下載選項。你可以在 HTML 程式碼中嵌入 He.js 作為替代選項。

你所要做的就是訪問 he.jscdnjs 頁面並獲取你喜歡的 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>

輸出:

&#x3C;h1&#x3E;Hello &#x3C;span class=&#x27;cool&#x27;&#x3E;world&#x3C;/span&#x3E; &#x3C;/h1&#x3E;
Habdul Hazeez avatar Habdul Hazeez avatar

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

相關文章 - JavaScript HTML