在 JavaScript 中轉義 HTML 字元的示例
沒有使用 JavaScript 將 HTML 特殊字元替換為所需字元的內建方法。我們通常呼叫自定義函式來實現該功能以轉義 HTML 預定義和保留的特殊字元。在本文中，我們將討論多個示例，以通過自定義宣告的函式使用 JavaScript 忽略這些字元。
JavaScript 轉義 HTML 字元方法例項
下面的 HTML 原始碼將顯示一個 From 輸入型別的文字，帶有佔位符，以在執行時從使用者那裡獲取任何字串值。在插入值期間，我們將在表單輸入的事件偵聽器上呼叫自定義宣告的函式。該函式將簡單地用另一個給定的字元更改提到的字元並最終返回結果。
我們將在瀏覽器控制檯中顯示轉換後的使用者給定字串結果。
<!DOCTYPE html>
<html>
<head>
<title>
HTML | Escape HTML Special Chars
</title>
<script type="text/javascript">
</script>
</head>
<body>
<h2>Hi Users Check Escape of HTML Special Chars.</h2>
<Form>
<input style='width:90%; padding:6px;' placeholder='Enter Text With HTML Chars'>
</Form>
<script>
//function to ignore OR escape HTML chars
const escapeHtmlChars = (unsafe) => {
return unsafe.replaceAll('&', '').replaceAll('<', '').replaceAll('>', '').replaceAll('"', '').replaceAll("'", '');
}
// Escape while typing & print result in console
document.querySelector('input').addEventListener('input', e => {
console.clear();
console.log( escapeHtmlChars(e.target.value));
});
</script>
</body>
<html>
在這個 HTML 頁面原始碼中，我們建立了一個表單輸入型別的文字，用於在網頁執行時從使用者那裡獲取一個字串值。
你可以看到 const 型別函式 escapeHtmlChars(string) 通過轉義 HTML 特殊字元來轉換使用者給定的字串。
在該方法的主體中，我們使用 JavaScript replaceAll(value1,value2) 方法將第一個 value1 替換為第二個 value2。
正如我們所知，我們正在尋找轉義 HTML 特殊字元，我們只是在第一個值處傳遞任何特殊字元（我們將要替換），在第二個值處傳遞一個空字串 ""。
如上所示，我們可以對字串多次使用 replaceAll() 方法，然後我們也返回轉換後的字串。
我們在 document.querySelector('input').addEventListener() 的偵聽器上呼叫了 escapeHtmlChars() 函式。當使用者在輸入表單中輸入或更改值時，它將自動觸發。
我們在 console.log() 中呼叫函式以在瀏覽器檢查中顯示返回值。
你可以在網頁中看到一個表單輸入，只需插入包含 HTML 特殊字元的字串並在控制檯標籤頁中檢視輸出。
在 JavaScript 中轉義 HTML 字元的另一種方法
你還可以使用 document.createTextNode(html) 實現相同的功能。它建立一個新的 Text 節點。此方法可用於通過將包含字串的字元傳遞給函式來轉義 HTML 字元。
然後我們將使用 appendChild(text) 將轉換後的文字附加到變數中
function escapeChars(html) {
var text = document.createTextNode(html);
var p = document.createElement('p');
p.appendChild(text);
return p.innerHTML;
}
我們只是使用了另一種方法 escapeChars(html) 來轉換文字並返回結果，而不使用 replace() 方法。