js html轉義詳解

一、轉義概述

JavaScript和HTML是一對緊密的關係，JavaScript作為HTML的一種腳本語言，常常用於處理HTML文檔的渲染、添加、修改和刪除等操作。然而，如果在HTML文檔中插入JavaScript代碼時，由於JavaScript中的一些字符和HTML標籤字符相同，可能會導致瀏覽器在解析時出現錯誤，甚至被攻擊者利用。因此，在HTML頁面上，我們需要對JavaScript中的特殊字符進行轉義，以確保JavaScript代碼不會破壞HTML頁面的結構。

轉義的過程就是將特殊字符變成某些特殊的編碼，這些編碼可以被瀏覽器識別，從而正確解析。在JavaScript中，有一些特殊的字符，稱為轉義序列，它們由反斜杠“\”和字母、數字或符號組合而成，如\n表示換行符，\t表示製表符，\\表示反斜杠本身。在HTML中，為了避免被瀏覽器解析成HTML標籤，需要將特殊字符用對應的實體名稱或實體編號表示，如 、&和”。

二、轉義字符

JavaScript中需要進行特殊字符的轉義一般有以下幾種情況：

1、轉義單引號和雙引號

在處理字符串時，如果字符串本身包含單引號或雙引號，那麼需要使用轉義字符給它加上轉義符號，否則會導致字符串截斷。

    
console.log('I\'m a programmer.');
// output: I'm a programmer.

console.log("He said, \"I love you.\"");
// output: He said, "I love you."
    

2、轉義斜杠

由於反斜杠本身就是轉義符，在JavaScript中，如果需要輸出一個反斜杠，那麼需要用雙反斜杠“\\”進行轉義。

    
console.log("c:\\windows");
// output: c:\windows
    

3、轉義換行符、製表符

在JavaScript中，換行符可以用“\n”表示，製表符可以用“\t”表示。

    
console.log("Hello,\nworld!");
// output: Hello,
// world!

console.log("Name\tAge\tGender\nTom\t18\tMale");
// output: Name   Age     Gender
//         Tom    18      Male
    

三、HTML實體

與JavaScript的轉義類似，在HTML中，為了避免特殊字符被瀏覽器解析成HTML標籤，需要使用實體名稱或實體編號進行轉義。

1、轉義小於號和大於號

HTML中小於號“<”和大於號“>”分別用實體名稱“&lt;”和“&gt;”進行轉義。

<span>This is a span.</span>
原創文章，作者：BBWQO，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/370389.html