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-tw/n/370389.html