（web前端学习笔记）JavaScript基础

最新推荐文章于 2024-09-04 20:18:34 发布
最新推荐文章于 2024-09-04 20:18:34 发布
阅读量1.7k 收藏 6
点赞数 1
分类专栏： web前端笔记 文章标签： javascript js 脚本语言 正则表达式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43110389/article/details/105843746
版权

JavaScript基础

一、JS简介

1、什么是JavaScript

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。

JavaScript 是一门弱类型的动态脚本语言，支持多种编程范式，包括面向对象和函数式编程，被广泛用于 Web 开发。

基本特点：

  1. 是一种运行在浏览器上的解释性脚本语言（代码不进行预编译）
  2. 主要用来向HTML页面添加交互行为。
  3. 可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

JavaScript 与 Java 是两种完全不同的语言，无论在概念上还是设计上。

两者的关系就像：周杰与周杰伦，雷锋与雷锋塔。

Java（由 Sun 发明）是更复杂的编程语言。

JavaScript 由Netscape（网景）公司的 Brendan Eich 发明。Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。

JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。

2、JavaScript的组成

完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型（DOM），浏览器对象模型（BOM）。

ECMAScript：描述该语言的语法和基本对象，是JavaScript的标准，目前的版本为ES6。

文档对象模型（DOM）：描述处理网页内容的方法和接口。

浏览器对象模型（BOM），描述与浏览器进行交互的方法和借口。

在这里插入图片描述

3、JavaScript的能力

JavaScript常用来完成以下任务：

  • 嵌入动态文本于HTML页面
  • 对浏览器事件作出响应
  • 读写HTML元素
  • 在数据被提交到服务器之前验证数据
  • 检测访客的浏览器信息

4、JavaScript的优点

(1)脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。

(2)基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。

(3)简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。

(4)动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。

(5)跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支持JavaScript脚本语言,JavaScript已被大多数的浏览器所支持。

二、JS使用与输出

1、JS使用

1.1、< script> 标签

在 HTML 中，JavaScript 代码必须位于 < script> 与 < /script> 标签之间。

<script>
document.getElementById("demo").innerHTML = "我的第一段 JavaScript";
</script>

注：旧的 JavaScript 例子也许会使用 type 属性：< script type=“text/javascript”>。

type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。

1.2、< head> 或 < body> 中的 JavaScript

举例1：放置于 HTML 页面的 < head> 部分

该函数会在按钮被点击时调用：

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
</head>

<body>

<h1>一张网页</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button>

</body>
</html>

举例2：放置于 HTML 页面的 < body> 部分

该函数会在按钮被点击时调用：

<!DOCTYPE html>
<html>
<body> 

<h1>A Web Page</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button>

<script>
function myFunction() {
   document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>

</body>
</html>

1.3、外部脚本

脚本可放置与外部文件中。

JavaScript 文件的文件扩展名是 .js。

外部脚本文件：myScript.js

function myFunction() {
   document.getElementById("demo").innerHTML = "段落被更改。";
}

举例：

注：如需使用外部脚本，请在 < script> 标签的 src (source) 属性中设置脚本的名称：

<script src="myScript.js"></script>

该脚本的表现与它被置于 < script> 标签中是一样的。

注意：外部脚本不能包含< script> 标签。

1.4、外部引用

可通过完整的 URL 或相对于当前网页的路径引用外部脚本：

举例：

本例使用完整的 URL 来链接至脚本：

<script src="https://www.w3school.com.cn/js/myScript1.js"></script>

2、JS输出

JavaScript 显示方案

JavaScript 能够以不同方式“显示”数据：

  • 使用 window.alert() 写入警告框
  • 使用 document.write() 写入 HTML 输出
  • 使用 innerHTML 写入 HTML 元素
  • 使用 console.log() 写入浏览器控制台

2.1、使用 innerHTML

如需访问 HTML 元素，JavaScript 可使用 document.getElementById(id) 方法。

id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容：

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<p id="demo"></p>

<script>
 document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html>

2.2、使用 document.write()

出于测试目的，使用 document.write() 比较方便，该方法会将返回值打印在空白页面上

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>

注意：在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML

所以==document.write() 方法仅用于测试==

测试：

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<button onclick="document.write(5 + 6)">试一试</button>

</body>
</html>

2.3、使用 window.alert()

alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。（window.可以省略）

<script>
window.alert(5 + 6);
</script>

2.4、使用 console.log()

在浏览器中，您可使用 console.log() 方法将数据显示在浏览器控制台。

请通过 F12 来激活浏览器控制台，并在菜单中选择“控制台”。

<script>
console.log(5 + 6);
</script>

三、JS语法

在 HTML 中，JavaScript 语句是由 web 浏览器“执行”的“指令”

1、JavaScript 变量

用var关键字 来声明变量.(js中 所有变量都可以用var来声明)

var a;
var b;
a = 10;
b = true;
var c = null;
var d = "hello js";
var a,b,c;
......

JavaScript 变量是存储数据值的容器

2、JavaScript 标识符

所有 JavaScript 变量必须以唯一的名称的标识。

这些唯一的名称称为标识符。

标识符可以是短名称（比如 x 和 y），或者更具描述性的名称（age、sum、totalVolume）。

构造变量名称（唯一标识符）的通用规则是：

  • 名称可包含字母、数字、下划线和美元符号
  • 名称必须以字母开头
  • 名称也可以 $ 和 _ 开头（但不建议）
  • 名称对大小写敏感（y 和 Y 是不同的变量）
  • 保留字（比如 JavaScript 的关键词）无法用作变量名称

3、JavaScript 数据类型

JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等等：

var i；										//未赋值时，默认值为undefined，类型为：undefined
var a = 7;                             		 // 数组 number类型
var falg = true;							 //布尔  boolean类型
var lastName = "Gates";                      // 字符串 string类型
var ss = null;								 //null  object类型			  	
var cars = ["Porsche", "Volvo", "BMW"];         // 数组  object类型
var x = {firstName:"Bill", lastName:"Gates"};    // 对象 object类型
var y = function myFunc(){};					//函数 function类型

注：

1.typeof运算符 == typeof（）

作用：确定 JavaScript 变量的类型，返回变量或表达式的类型。返回值为String类型。

typeof 3.14                // 返回 "number"
typeof (7)                 // 返回 "number"
typeof (7 + 8)            // 返回 "number"
typeof ""                  // 返回 "string"
typeof "Bill";             // 返回 "string"
typeof(null);				//返回 “object”
typeof function myFunc(){}   // 返回 "function"
......

2.在 JavaScript 中，null 是 “nothing”。它被看做不存在的事物。

可以通过设置值为 null 清空对象

var person = null;           // 值是 null，但是类型仍然是对象

可以通过设置值为 undefined 清空对象：

var person = undefined;     // 值是 undefined，类型是 undefined

3.Undefined 与 Null 的区别

Undefined 与 null 的值相等，但类型不相等：

typeof undefined              // undefined
typeof null                   // object
null === undefined            // false
null == undefined             // true
/*== 与 ===的区别
== 代表相同， ===代表严格相同
当进行双等号比较时候： 先检查两个操作数数据类型，如果相同， 则进行===比较， 如果不同， 则愿意为你进行一次类型转换， 转换成相同类型后再进行比较， 而===比较时， 如果类型不同，直接就是false.
*/

4.空值与 undefined 不是一回事。

空的字符串变量既有值也有类型。

4、JavaScript 关键词

关键词描述
break终止 switch 或循环。
continue跳出循环并在顶端开始。
debugger停止执行 JavaScript，并调用调试函数（如果可用）。
do … while执行语句块，并在条件为真时重复代码块。
for标记需被执行的语句块，只要条件为真。
function声明函数。
if … else标记需被执行的语句块，根据某个条件。
return退出函数。
switch标记需被执行的语句块，根据不同的情况。
try … catch对语句块实现错误处理。
var声明变量。

四、JS函数

1、JavaScript 函数语法

JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。

语法：

var 变量名 = function (参数列表) {
    函数体;//要执行的代码
};

举例：

function myFunction(p1, p2) {
    return p1 * p2;              // 该函数返回 p1 和 p2 的乘积
}

注意：在 JavaScript 函数中声明的变量，会成为函数的局部变量。

局部变量只能在函数内访问。

2、函数调用

方法：函数名()；

函数中的代码将在其他代码调用该函数时执行：

  • 当事件发生时（当用户点击按钮时）
  • 当 JavaScript 代码调用时
  • 自动的（自调用）

3、函数返回

当 JavaScript 到达 return 语句，函数将停止执行。

如果函数被某条语句调用，JavaScript 将在调用语句之后“返回”执行代码。

函数通常会计算出返回值。这个返回值会返回给调用者：

var x = myFunction(7, 8);        // 调用函数，返回值被赋值给 x

function myFunction(a, b) {
    return a * b;                // 函数返回 a 和 b 的乘积
}

五、JS对象

JavaScript 对象是被命名值的容器。

值以名称:值对的方式来书写（名称和值由冒号分隔）。

（JavaScript 对象中的）名称:值对被称为属性。

1、对象定义

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

等价于

var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
};

这里的person被称为一个JavaScript对象

2、对象方法

对象也可以有方法。

方法是在对象上执行的动作。

方法以函数定义被存储在属性中。

方法是作为属性来存储的函数。

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

3、访问对象属性、方法

访问对象属性两种形式：

例：

//方式一：
document.write(person.lastName);
//方式二：
document.write(person["lastName"]);
//以下两种形式错误
document.write(person["lastName"+"firstName"]);//结果：undefined
document.write(person["lastName"+"id"]);//结果：undefined

注：这两种方式使用相同。

访问对象方法：

document.write(person.fullName());//Bill Gates
//下面形式返回函数定义
document.write(person.fullName);//function() { return this.firstName + " " + this.lastName; }

4、this 关键词

在函数定义中，this 引用该函数的“拥有者”。

举例：

this.firstName ：意思是 this 对象（这里为person对象）的 firstName 属性。

六、JS字符串、数字

1、JavaScript 字符串

JavaScript 字符串用于存储和操作文本。

//以下两种定义无区别
var carname = "Porsche 911";
var carname = 'Porsche 911';
//
var answer = "He is called 'Bill'";
var answer = 'He is called "Bill"';

1.1、\ 转义字符

由于字符串必须由引号包围，当需要输出的字符串也包含引号时，JavaScript 会误解这段字符串

比如：

var y = "中国是瓷器的故乡，因此 china 与"China（中国）"同名。"

上述：JavaScript会报异常：Uncaught SyntaxError: Unexpected identifier

需使用 \转义字符,反斜杠转义字符把特殊字符转换为字符串字符.

var x = "中国是瓷器的故乡，因此 china 与\"China（中国）\"同名。"
代码结果描述
’’单引号
""双引号
\\反斜杠
\b退格键
\f换页
\n新行
\r回车
\t水平制表符
\v垂直制表

1.2、字符串对象

字符串可通过关键词 new 定义为对象==(十分不建议使用new方式)==

var x = "Bill";
var y = new String("Bill");

// typeof x 将返回 string
// typeof y 将返回 object
// (x == y) 为 true，因为 x 和 y 的值相等
// (x === y) 为 false，因为 x 和 y 的类型不同（字符串与对象）

new 关键字使代码复杂化,请不要把字符串创建为对象.

弊端：

1.使用 == 相等运算符时，相等字符串是相等的

​ 当使用 === 运算符时，相等字符串是不相等的，因为 = == 运算符需要类型和值同时相等

2.对象无法比较

var x = new String("Bill");             
var y = new String("Bill");

// (x == y) 为 false，因为 x 和 y 是不同的对象
// (x === y) 为 false，因为 x 和 y 是不同的对象

1.3、字符串方法

在 ECMAScript中，变量存在两种类型的值，原始值和引用值

ECMAScript 有 5 种原始类型（primitive type），即 Undefined、Null、Boolean、Number 和 String。

引用类型通常叫做类（class），也就是说，遇到引用值，所处理的就是对象。

原始值：存储在栈（stack）中的简单数据段，是原始类型的值。

引用值：存储在堆（heap）中的对象，Object 对象。

原始值，比如“Bill Gates”，无法拥有属性和方法（因为它们不是对象）。但是通过 JavaScript，方法和属性也可用于原始值，因为 在执行方法和属性时 JavaScript 将原始值视为对象

1.31、字符串长度

length 属性返回字符串的长度：

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var str = "中国";
var sp = " a ";
document.write(txt.length);//26
document.write(str.length);//2
document.write(sp.length);//3 空格也算一个字符
1.32、查找字符串中的字符串

indexOf() 方法返回字符串中指定文本首次出现的索引（位置）：（索引从0开始）

lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引：

search() 方法搜索特定值的字符串，并返回匹配的位置：结果与indexof（）相同。

区别在于：search() 方法无法设置第二个开始位置参数，可设置更强大的搜索值（正则表达式）。

indexof（）可以设置第二个开始位置参数，不可设置正则表达式。

var str = "abcabcaabbcc";
var pos = str.indexOf("aa");
var pos1 = str.lastIndexOf("aa");
document.write(pos);//3
document.write(pos1);//8

如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。

两种方法都接受作为检索起始位置的第二个参数。

var str = "abcabcaabbcc";
var pos = str.indexOf("aa",2);
var pos1 = str.lastIndexOf("aa",5);
document.write(pos);//6
document.write(pos1);//-1

注意：indexOf()向后进行检索（从头到尾）本例从索引为2的c开始向后检索，经过abc 查到aa

lastIndexOf() 向前进行检索（从尾到头），本例从索引为5的c开始向前检索，经过bacba，未找到aa，返回-1

1.33、提取部分字符串
  • slice(start, end)：提取字符串的某个部分并在新字符串中返回被提取的部分。可接受负索引。
  • substring(start, end)：与slice(start, end)相同，但不可接负索引
  • substr(start, length)：与substring(start, end)类似，只不过第二个参数为长度。
        var str = "Apple, Banana, Mango";
        var res = str.slice(7, 13);
        var res1 = str.slice(7);
        var res2 = str.slice(-13, -7);
        var res3 = str.slice(-13);
        var res4 = str.substring(7, 13);
        var res5 = str.substring(7);
        var res6 = str.substr(7, 6);
        var res7 = str.substr(7);
        console.log(res+"\n");//Banana
        console.log(res1+"\n");//Banana, Mango
        console.log(res2+"\n");//Banana
        console.log(res3+"\n");//Banana, Mango
        console.log(res4+"\n");//Banana
        console.log(res5+"\n");//Banana, Mango
        console.log(res6+"\n");//Banana
        console.log(res7+"\n");//Banana, Mango
1.34、替换字符串内容

replace() 方法用另一个值替换在字符串中指定的值：

replace() 方法不会改变调用它的字符串。它返回的是新字符串。

默认地，replace() 只替换首个匹配：

var str = "Apple, Banana, Mango";
var newStr = str.replace("Banana","Orange");
document.write(newStr);//Apple, Orange, Mango

var str1 =  "Apple, Banana, Mango, Banana";
var newStr1 = str1.replace("Banana","Orange");
document.write(newStr1);//Apple, Orange, Mango, Banana
1.35、转换为大写和小写

通过 toUpperCase() 把字符串转换为大写：

通过 toLowerCase() 把字符串转换为小写：

var str = "Hello World";
document.write(str.toUpperCase());//HELLO WORLD
document.write(str.toLowerCase());//hello world
1.36、concat() 方法

concat() 连接两个或多个字符串：

var text1 = "Hello";
var text2 = "World";
text3 = text1.concat(" ",text2);

concat() 方法可用于代替加运算符。下面两行是等效的：

var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ","World!");

注意：所有字符串方法都会返回新字符串。它们不会修改原始字符串。

正式地说：字符串是不可变的：字符串不能更改，只能替换。

1.37、String.trim()

trim() 方法删除字符串两端的空白符：

var str = "       Hello World!        ";
alert(str.trim());
1.38、提取字符串字符

charAt() 方法返回字符串中指定下标（位置）的字符串

charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码

var str = "HELLO WORLD";
str.charAt(0);            // 返回 H
var str1 = "HELLO WORLD";
str1.charCodeAt(0);         // 返回 72
1.39、属性访问
var str = "HELLO WORLD";
str[0];                   // 返回 H

注意：

  • 它让字符串看起来像是数组（其实并不是）
  • 如果找不到字符，[ ] 返回 undefined，而 charAt() 返回空字符串。
  • 它是只读的。str[0] = “A” 不会产生错误（但也不会工作！）
var str = "HELLO WORLD";
str[0] = "A";             // 不产生错误，但不会工作
str[0];                   // 返回 H
1.310、把字符串转换为数组

split() 方法将字符串转换为数组：

txt.split(",");          // 用逗号分隔
txt.split(" ");          // 用空格分隔
txt.split("|");          // 用竖线分隔

var str="How are you doing today?"

document.write(str.split(" ") + "<br />")//How,are,you,doing,today?
document.write(str.split("") + "<br />")//H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
document.write(str.split(" ",3))//How,are,you

如果省略分隔符，被返回的数组将包含 index [0] 中的整个字符串。

如果分隔符是 “”，被返回的数组将是间隔单个字符的数组.

2、JavaScript 数字

JavaScript 只有一种数值类型

2.1、JavaScript 数值

JavaScript 数值始终是 64 位的浮点数

与许多其他编程语言不同，JavaScript 不会定义不同类型的数，比如整数、短的、长的、浮点的等等。

JavaScript 数值始终以双精度浮点数来存储。

var x = 3.14;    // 带小数点的数值
var y = 3;       // 不带小数点的数值
var x = 123e5;    // 12300000
var y = 123e-5;   // 0.00123

2.2、数字和字符串相加

var x = 10;
var y = "20";
var z = x + y;           // z 将是 1020（一个字符串）

var x = 10;
var y = 20;
var z = "30";
var result = x + y + z;//结果为3030（字符串）

2.3、数字字符串

JavaScript 字符串可以拥有数字内容：

var x = 100;         // x 是数字
var y = "100";       // y 是字符串
document.write(x == y);//true
document.write(x === y);//false

在所有数字运算中，JavaScript 会尝试将字符串转换为数字：（加法运算不满足）

var x = "100";
var y = "10";
var z = x / y;       // z 将是 10（数值型）
document.write(typeof(z))//number

var x = "100";
var y = "10";
var z = x + y;       // z 不会是 110（而是 10010）

2.4、NaN - 非数值

NaN 属于 JavaScript 保留词，指示某个数不是合法数

使用全局 JavaScript 函数 isNaN() 来确定某个值是否是数：

var x = 100 / "Apple";  // x 将是 NaN（Not a Number）
isNaN(x);               // 返回 true，因为 x 不是数
typeof NaN;             // 返回 "number"

2.5、Infinity

Infinity （或 -Infinity）是 JavaScript 在计算数时超出最大可能数范围时返回的值。

var x =  2 / 0;          // x 将是 Infinity
var y = -2 / 0;          // y 将是 -Infinity
typeof Infinity;        // 返回 "number"

2.6、JavaScript 数值方法

2.61、toString() 方法

toString() 以字符串返回数值。

所有数字方法可用于任意类型的数字（字面量、变量或表达式）：

var x = 123;
x.toString();            // 从变量 x 返回 123
(123).toString();        // 从文本 123 返回 123
(100 + 23).toString();   // 从表达式 100 + 23 返回 123
2.62、toExponential() 、toFixed() 、toPrecision()

toExponential() 返回字符串值，它包含已被四舍五入并使用指数计数法的数字。

参数定义小数点后的字符数：

var x = 9.656;
x.toExponential(2);     // 返回 9.66e+0
x.toExponential(4);     // 返回 9.6560e+0
x.toExponential(6);     // 返回 9.656000e+0

注：该参数是可选的。如果您没有设置它，JavaScript 不会对数字进行舍入。

toFixed() 返回字符串值，它包含了指定位数小数的数字：

var x = 9.656;
x.toFixed(0);           // 返回 10
x.toFixed(2);           // 返回 9.66
x.toFixed(4);           // 返回 9.6560
x.toFixed(6);           // 返回 9.656000

toPrecision() 返回字符串值，它包含了指定长度的数字：

var x = 9.656;
x.toPrecision();        // 返回 9.656
x.toPrecision(2);       // 返回 9.7
x.toPrecision(4);       // 返回 9.656
x.toPrecision(6);       // 返回 9.65600

七、JavaScript 正则表达式

正则表达式是构成*搜索模式（search pattern）*的字符序列。

当您搜索文本中的数据时，您可使用搜索模式来描述您搜索的内容。

正则表达式可以是单字符，或者更复杂的模式。

正则表达式可用于执行所有类型的文本搜索和文本替换操作。

语法：/pattern/attributes

1、修饰符

修饰符描述
i执行对大小写不敏感的匹配。
g执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m执行多行匹配。

2、方括号

方括号用于查找某个范围内的字符：

表达式描述
[abc]查找方括号之间的任何字符。
[^abc]查找任何不在方括号之间的字符。
[0-9]查找任何从 0 至 9 的数字。
[a-z]查找任何从小写 a 到小写 z 的字符。
[A-Z]查找任何从大写 A 到大写 Z 的字符。
[A-z]查找任何从大写 A 到小写 z 的字符。
[adgk]查找给定集合内的任何字符。
[^adgk]查找给定集合外的任何字符。
(red|blue|green)查找任何指定的选项。

3、元字符

元字符（Metacharacter）是拥有特殊含义的字符：

元字符描述
.查找单个字符，除了换行和行结束符。
\w查找单词字符。
\W查找非单词字符。
\d查找数字。
\D查找非数字字符。
\s查找空白字符。
\S查找非空白字符。
\b匹配单词边界。
\B匹配非单词边界。
\0查找 NUL 字符。
\n查找换行符。
\f查找换页符。
\r查找回车符。
\t查找制表符。
\v查找垂直制表符。
\xxx查找以八进制数 xxx 规定的字符。
\xdd查找以十六进制数 dd 规定的字符。
\uxxxx查找以十六进制数 xxxx 规定的 Unicode 字符。

4、量词

量词描述
n+匹配任何包含至少一个 n 的字符串。
n*匹配任何包含零个或多个 n 的字符串。
n?匹配任何包含零个或一个 n 的字符串。
n{X}匹配包含 X 个 n 的序列的字符串。
n{X,Y}匹配包含 X 至 Y 个 n 的序列的字符串。
n{X,}匹配包含至少 X 个 n 的序列的字符串。
n$匹配任何结尾为 n 的字符串。
^n匹配任何开头为 n 的字符串。
?=n匹配任何其后紧接指定字符串 n 的字符串。
?!n匹配任何其后没有紧接指定字符串 n 的字符串。

5、常用正则表达式

用户名/^ [a-z0-9_-]{3,16}$/
密码/^ [a-z0-9_-]{6,18}$/
十六进制值/^#?([a-f0-9]{6}|[a-f0-9]{3})$/
电子邮箱/^([a-z0-9_.-]+)@([\da-z.-]+).([a-z.]{2,6})KaTeX parse error: Undefined control sequence: \d at position 9: / /^[a-z\̲d̲]+(\.[a-z\d]+)*…/
URL/^(https?:\ //)?([\da-z.-]+).([a-z.]{2,6})([/\w .-])/?$/
IP 地址/((2[0-4]\d|25[0-5]|[01]?\d\d?).){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/ /^(?: (?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
HTML 标签/ <([a-z]+)([ <]+)(?:>(.)</\1>|\s+/>)$/
删除代码\注释(?<!http:|\S)//.*$
Unicode编码中的汉字范围/^ [\u2E80-\u9FFF]+$/

注：若需要更详细的学习该技术，推荐去w3school网进行进一步学习。
网址：https://www.w3school.com.cn/

小张不会飞
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js笔记web前端开发
02-07
js笔记web前端开发
尚硅谷web前端学习笔记javaScript基础全部 143页 40207字
01-28
尚硅谷web前端学习笔记javaScript基础全部 143页 40207字
web前端 JS笔记
KonG_WeI的博客
12-06 361
不定时更新不同的前端学习笔记 现在整理的是JS的初级相关笔记 如果想要入门级JS笔记可以参考一下
Web前端 JavaScript笔记1
qq_43817005的博客
08-22 162
1.学习var定义变量 2.if-----else的学习 if----else if-----else if的学习 if----else的嵌套学习 3.学习了数组 对象 利用数组存取对象做的电话本 <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="I...
web前端开发JavaScript笔记整理
weixin_64559564的博客
04-05 1386
JavaScript笔记 javascript笔记大全***JavaScript笔记***JavaScript如何使用？JS语法常见的关键字常见的数组API函数： JavaScript如何使用？ JavaScript如何使用？ 1:直接嵌入在元素事件中；如< div οnclick=“js部分代码”> 2：写在< script>< /script >标签中；在本标签中是不允许出现任何内容的； 3：写在外部的脚本文件中； 语法规范： 使用分号来结束；大小写敏感，英文标点符
Web前端-JS基础
weixin_43609222的博客
06-23 117
此文为转载，看到时很喜欢觉得很棒，下面是链接地址 链接地址
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar
04-18
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar ...
超详细的web前端基础学习笔记
06-28
#### 超详细的web前端基础学习笔记 ##### 前端课程介绍 - **HTML**：HTML (HyperText Markup Language) 是一种标记语言，用于定义网页的结构与内容。它如同网页的骨架，为网页提供基本框架。 - **CSS**：CSS ...
Web前端JavaScript基础学习笔记
07-25
这个学习笔记是我基于B站视频Mosh的JavaScript基础篇学习记录的一些笔记和代码。 内容不多，也就作为一个大家学习的参考。 免费的笔记，如果你喜欢，请和大家分享这个资源，谢谢。 视频链接：...
前端学习笔记（四）：js语法进阶笔记
憬淮的博客
12-06 245
js语法进阶笔记
关于JavaScript
X
12-14 429
关于JAVASCRIPT JAVASCRIPT：是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画等。 声明变量： let：????jiantou关于let var：????关于var 声明常量： const：????关于const 变量的命名规则： 匿名函数：????关于匿名函数 匿名函数（函数表达式）：函数表达式与函数声明有一些区别：函数声明会进行声明提升（declaration hoisting），而函数表达式不会。 几种常见将函数赋值给变量的写法：
Web前端学习笔记
PizAn的博客
12-15 1935
HTML Web前端（一）HTML css Web前端（二）HTMLHTML&amp;amp;amp;css（上）table+form 创建表单 Web前端（二）HTML&amp;amp;amp;css（下）css选择器和引入方式、css重构网站首页 JavaScript Web前端（三）JavaScript (1) 表单校验：弹出显示 Web前端（三）JavaScript (2) 轮播图片+弹出广告 Web前端（三）JavaS...
Uncaught SyntaxError: Invalid regular expression: /^(?:[-()\/a-zA-Z0-9ã‚: Range out of order in char
星空的博客
04-25 9545
错误：Uncaught SyntaxError: Invalid regular expression:/^(?:[-()\/a-zA-Z0-9ã‚¡-ヺー-ヾｦ-ﾟｰï¼-９Ａ-Ｚï½-ｚã-ã‚–ã‚™-ゞー々ã-ã‚“ã‚¡-ヾ一-\u9FEFã€-䶵﨎ï¨ï¨‘﨓﨔﨟﨡﨣﨤﨧-﨩]|[\ud...
web前端遇到的坑（bug）！！！
I_am_ken的博客
03-11 6423
前言：看到这个标题，大家肯定有一定的幻想，我想大家都没想错，我今天就是要来说说我遇到的bug，还有解决的方法。 原生JS篇 1、微信屏蔽链接 问题：在微信打开下载链接或某些链接，无法直接通过微信页面直接打开？ 原因：微信内置浏览器屏蔽了链接，比如竞争对手某宝的链接，当然就不会有其他关于商业性的链接（除了自家的或者合作伙伴的某东的链接）。 解决方法：使用原生JS获取浏览器版本号及是否是微信打开...
web前端入门学习笔记——JS基础（传智播客）
cindy647的博客
06-25 5351
Javascript基础１   聊聊Javascript１.1 Javascript的历史来源  94年网景公司   研发出世界上第一款浏览器。  95年 sun公司   java语言诞生  网景公司和sun合作。  Java+script   ===&gt; javascriptJavaScript 借鉴了C语言的基本语法，借鉴了JAVA的数据类型和内存管理，借鉴scheme语言将函数提升到第一...
web前端面试题-1
热门推荐
htong521的博客
06-19 1万+
1. JavaScript中如何检测一个变量是一个String类型？请写出函数实现typeof(obj）==="string"typeof obj === "string"obj.constructor === String2. js字符串操作函数length – 返回字符串的长度，所谓字符串的长度是指其包含的字符的个数。concat() – 将两个或多个字符的文本组合起来，返回一个新的字符串。l...
JS都有哪些操作数组的方法
最新发布
ggq53219的博客
09-04 552
JavaScript 中操作数组的方法非常丰富，这些方法大致可以分为几类：创建和初始化数组、添加元素、删除元素、遍历数组、搜索元素、数组排序、数组映射和过滤等。
Java Web前端学习笔记：HTML到AJAX基础
"这篇文档包含了作者在学习Java Web前端时的笔记，主要涵盖了前端开发的基础知识，包括HTML、CSS、JavaScript、DOM编程、jQuery框架以及AJAX基础。" 本文档详细介绍了Java Web前端开发中的核心技术和元素，首先从...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值