一、转义概述
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中小于号“<”和大于号“>”分别用实体名称“<”和“>”进行转义。
<span>This is a span.</span>
// output: This is a span.
2、转义引号和单引号
在HTML中,需要将双引号和单引号用实体名称表示。
Link
// output: Link
Link
// output: Link
3、转义空格和断行
在HTML中,空格可以用空格字符“ ”进行转义,而换行则可以用“&br;”进行转义。
This paragraph contains some spaces.
This is the first line.
This is the second line.
This is the third line.
四、代码示例
下面是一些JavaScript中常见的转义字符和HTML实体的示例代码:
const str1 = 'I\'m a programmer.';
const str2 = "He said, \"I love you.\"";
const str3 = "c:\\windows";
const str4 = "Hello,\nworld!";
const str5 = "This is a paragraph.
";
const str6 = "";
document.write(str1 + "
" + str2 + "
" + str3 + "
" + str4 + "
" + str5 + "
" + str6);
输出结果:
I'm a programmer.
He said, "I love you."
c:\windows
Hello,
world!
<p>This is a paragraph.</p>
<img src="example.jpg" alt="Example">