資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 JavaScript 中轉義 HTML 特殊字元？
HTML 包含特殊字元，例如 ‘<,’ ‘>,’ ‘/,’ 以及更多諸如單引號和雙引號之類的字元。這些特殊字元用於 HTML 標籤，例如 ‘<’ 用於開啟 HTML 標籤。‘/’ 和 ‘>’ 用於關閉 HTML 標籤。本教程將教你如何在 JavaScript 中轉義 HTML 特殊字元。
現在，問題是如果我們想在 HTML 內容中使用這些字元怎麼辦？如果我們在 HTML 內容中正常使用特殊字元，它會將其視為開啟或關閉 HTML 標籤，併產生未知錯誤。
例如，我們需要將以下字串渲染到瀏覽器中。
<b> tutorialsPoint </b>
如果我們直接在 HTML 中新增上述字串，它會將 <b> 視為粗體標籤，但我們希望將其用作字串。
為了克服上述問題，我們必須對所有特殊字元使用 Unicode。在這裡，我們將用 Unicode 替換所有特殊字元以轉義 HTML 特殊字元，並在 HTML 字串中使用它們。
下面給出解決上述問題的不同方法。
- 使用 createTextNode() 方法
- 使用 textContent 屬性
- 使用 replace() 方法
使用 createTextNode() 方法
在這種方法中，我們將使用 HTML DOM 中的 createTextNode() 方法。我們只需要將字串作為引數傳遞給該方法，它會返回編碼後的字串。
語法
Var converted_string = document.createTextNode(string);
引數
字串 − 我們可以將任何 HTML 字串作為引數傳遞以轉義特殊字元並對其進行編碼。
示例 1
以下示例演示了在 JavaScript 中使用 createTextNode(string) 方法。
<!DOCTYPE html>
<html>
<body>
<h2>Escape HTML special Chars in JavaScript.</h2>
<h4> String After escaping the special characters: </h4>
<p id = "contentDiv"> </p>
<script type = "text/javascript">
// function to escape special chars using createTextNode() method.
function escapeSpecialChars() {
let string_var = " <h1> tutorialsPoint </h1> ";
let escapedString = document.createTextNode(string_var);
contentDiv.appendChild(escapedString);
}
escapeSpecialChars();
</script>
</body>
</html>對於以上示例輸出，使用者可以觀察到我們使用 createTextNode() 方法建立了一個編碼後的字串，並將其插入到 HTML DOM 中。它按原樣呈現特殊字元，而不將其視為標籤元素。
使用 textContent 屬性
我們可以在 JavaScript 中建立一個 HTML 元素並新增 HTML 字串。我們可以使用 HTML Textarea 元素的 textContent 屬性並插入 HTML 字串。之後，我們可以使用 innerHTML 屬性獲取使用 Unicode 編碼的字串。
語法
let textAreaDiv = document.createElement( 'textarea' ); textAreaDiv.textContent = HTML_String; let encoded_string = textAreaDiv.innerHTML;
引數
HTML_字串 − 我們可以將任何我們想要編碼的 HTML 字串作為此引數傳遞。
示例 2
使用者可以參考以下示例以檢視上述方法的演示。
<!DOCTYPE html>
<html >
<body>
<h2>Escape HTML special Chars in javascript.</h2>
<h4> String After escaping the special characters. </h4>
<p id="resultDiv"> </p>
<script type = "text/javascript">
let textAreaDiv = document.createElement('textarea');
var resultDiv = document.getElementById("resultDiv");
textAreaDiv.textContent = "<div>Welcome to tutorialsPoint website.</div>";
let encoded_string = textAreaDiv.innerHTML;
resultDiv.innerHTML = encoded_string;
</script>
</body>
</html>使用者可以在以下輸出中看到如何使用 textContent 屬性對字串進行編碼。
使用 Replace() 方法
在這種方法中，我們將使用 JavaScript 的 replace() 方法。我們可以使用 replace() 方法將一個字元替換為另一個字元。在這裡，我們將使用 replace() 方法將 HTML 字串中的所有特殊字元替換為其 Unicode。
語法
html_string.replace( old_char, new_char )
引數
Html_字串 − 它是我們需要轉義特殊字元的字串。
舊字元 − 它是需要替換的字串中的字元。
新字元 − 它是我們將在舊字元位置新增到字串中的字元。
示例 3
以下示例演示瞭如何使用 replace() 方法替換特殊字元來對 HTML 字串進行編碼。
<!DOCTYPE html>
<html>
<body>
<h2>Escape HTML special chars</h2>
<p> Result after escaping the special characters. </p>
<p id="result"></p>
<script>
// function to escape special chars using replace() method.
function escapeSpecialChars(str) {
return str
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
let string = ` <div> hello user! <i>your welcome</i> here. </div>`;
let escape = escapeSpecialChars(string);
document.getElementById("result").innerHTML = escape;
</script>
</body>
</html>使用者可以看到我們已經成功地使用 replace 方法替換了所有特殊字元，並且我們可以按原樣呈現包含特殊字元的字串。
結論
在本教程中，我們學習了三種在 HTML 中替換特殊字元的方法。使用者可以根據自己的需要使用任何方法。
9K+ 閱讀量
