目录
一、JavaScript
在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。Netscape在最初将其脚本语言命名为LiveScript，因为Netscape与Sun合作，网景公司管理层希望蹭Java的热度，因此取名为JavaScript。
JavaScript总共分成三部分: ECMAScript(基本语法)、BOM(浏览器对象模型)、DOM(文档对象模型)
-
基于对象
JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。但是面向对象的三大特性：『封装』、『继承』、『多态』中，JavaScript能够实现封装，可以模拟继承，不支持多态，所以它不是一门面向对象的编程语言。
-
事件驱动
JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。
-
弱类型
JavaScript中也有明确的数据类型，但是声明一个变量后它可以接收任何类型的数据，并且会在程序执行过程中根据上下文自动转换类型。(万事万物皆可var)
-
跨平台性
JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支持JavaScript脚本语言。目前JavaScript已被大多数的浏览器所支持
关键字：
(1).JavaScript的基本语法
JavaScript的引入方式
① 内部脚本方式(内部书写)
<script></script> 放到<//body> 写到结束标签的上面
② 外部脚本方式(引入外部文件)
<script src="外部标签地址"></script> 写到head中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的引入方式</title>
<!--
建议在head中引入外部的js文件
-->
<script src="../js/outer.js"></script>
</head>
<body>
<!--
第一种引入方式: 内部引入方式，在HTML文档内部，通过script标签去编写js代码
-->
<!--
第二种引入方式: 外部引入方式，在当前项目中创建一个js文件，然后在需要引入的HTML里面使用script标签引入
一个script标签要么负责编写内部的js代码，要么负责引入外部的js文件
-->
<script type="text/javascript">
//调用外部js文件中的方法
showMessage();
alert("hello world");
</script>
</body>
</html>语法规范
1.可以不写分好，但是建议补充完整；
2.所有标点符号 英文半角
3.严格区分大小写
4.使用了未初始化变量 值是 undefined
5.使用了未声明的变量 会报错 “ncaught ReferenceError: z is not defined”
(2).JavaScript数据类型
-
关键字：var,其实ECMAScript6之后建议使用let
数据类型：JavaScript变量是弱类型的，可以接收任意类型的数据 -
基本数据类型
-
数值型(number)：整数、小数，NaN (number与undefined做运算时)
-
字符串(string)：JavaScript不区分字符、字符串；
-
布尔型(boolean)：true、false
在JavaScript中，其他类型和布尔类型的自动转换。
表示true：非零的数值，非空字符串，非空对象
表示false：false、零，空字符串""，null，undefined、NaN
例如："false"放在if判断中
-
不明确的(undefined)：未赋值的变量
-
空值 null：空值，object类型
-
<body>
<h1>基本数据类型</h1>
<script>
//Ctrl + Shift + J 浏览器快速打开控制台
/*
number: 数值型 小数 整数
*/
//声明数值类型的变量
console.log("------------- number -------------");
var i = 10;
var d = 3.14;
//快速打印 i.log; console:控制台 log:日志
console.log(i);
console.log(d);
//判断类型
console.log(typeof i);
console.log("------------- string -------------");
//字符串类型
var s1 = '你好世界';
console.log(s1);
var s2 = "你好世界";
console.log(s2);
console.log(typeof s1);
console.log(typeof s2);
alert(s1);
//var s2 = 'Hello';
//console.log(s2); //Js轻易不报错
console.log("------------- boolean -------------");
//布尔
var b = true;
console.log(b);
console.log(typeof b);
var b1 = false;
console.log(b1);
console.log(b1.valueOf())
console.log("------------- undefined -------------");
//undefined 一个类型
var c;
console.log(c); //不会报错，undefined
console.log(typeof c) //undefined
//使用未声明变量 报错： ncaught ReferenceError: z is not defined
//console.log(z); //会报错
//如果上面的JS出现问题，则下面的代码不再执行
console.log("------------- null -------------");
var n = null;
console.log(n);
console.log(typeof n) //object
console.log("------------- NaN -------------");
//not a number;
var m; //undefined 在和数值做运算时，结果为NaN
var sum = 1+3+m;
console.log(sum);
console.log(sum.valueOf()) //NaN：number类型
</script>
</body>-
引用数据类型
-
所有new出来的对象
-
用 [] 声明的数组
-
用 {} 声明的对象
-
(3).函数(重点)
① 内置函数：系统定义好的函数
-
弹出警告框
<script> alert("警告框内容"); </script>-
弹出确认框 返回布尔值 确认:true 取消:false
<script> var result = confirm("确定要删除吗？"); </script>-
信息输入框 返回string类型
<script> var s = prompt("请您输入年龄",30); //默认值30 </script><script>
/*
内置函数: 系统定义好的函数 Ctrl + Shift +j
*/
//提示框
alert("你好 世界");
//确认框: 确定 true 取消 false
var b = confirm("确定退出吗?");
console.log(b);
//信息输入框 prompt
//方式2 加入默认值
var s2 = prompt("请您输入年龄",30);
console.log(s);
</script>猜数字游戏 — 通过使用 Math、random、确认框、流程控制语句
<script> /*m 较小的数 n 较大的数 取值范围[m,n] Math.floor(Math.random()*(n-m+1)+m) //floor 向下取整*/ var number = Math.floor(Math.random()*(100-0+1)+0); console.log(number); var n; while (true){ n = prompt("请输入您的幸运数字："); if(n<number){ alert("小了！") }else if(n>number){ alert("大了！") }else{ alert("恭喜您，幸运数字为"+n); break; } } </script>
② 自定义的函数 ：声明函数
方式1：
<script>
function sum(a, b) {
return a+b;
} </script>方式2：
<script>
var f2= function() {
alert("f2 函数执行了")
};
</script>注意：
1.如果函数需要返回值，在底部return即可。
2.实参的数量可以和形参不一致，没有赋值的形参 值为 undefined
3.如果函数没有返回值，使用变量接收函数执行结果，值为 undefined
4.js没有函数重载 如果函数名相同，调用最下面的函数
<script>
//函数的声明
function f1(){
//alert("f1 函数执行了")
}
//函数调用
f1();
//函数声明2: 将函数赋值给f2
var f2 = function(){
//alert("f2 函数执行了")
}
f2();
console.log("----------带参数的声明----------")
//带参数的函数
function sum(a,b){ //var
console.log(a);
console.log(b);
console.log(a+b);
}
sum(30,40); //70
sum(20); //b:undefined 只声明未赋值 a+b:NaN
console.log("----------带返回值的声明----------")
function getName(a,b){
console.log(a);
console.log(b);
console.log(a+b);
return "安其拉"; //需要返回，加return 默认返回undefined
}
var name = getName("李白","杜甫");
console.log(name);
</script>应用：判断一个数是否为质数 (求1-100内质数)
<script> //判断一个数是否为质数 var num = prompt("请输入数字"); myfc(num); function myfc(num){ var flag = true; for (let i = 2; i <= Math.sqrt(num); i++) { if(num%i==0){ flag = false; }; if(flag){ return alert(num+"是质数"); }else { return alert(num+"不是质数"); } }; </script> <script> //通过方法求1-100质数 for (let i = 1; i <= 100; i++) { var r =myfc(i); if(r){ console.log(i); } }; function myfc(num){ var flag = true; for (let i = 2; i <= Math.sqrt(num); i++) { if(num%i==0){ flag = false; }; }; if(flag) { return true; }else { //console.log(num + "不是质数"); }; }; </script>
(4).对象(重点)
JavaScript中没有『类』的概念，对于系统内置的对象可以直接创建使用。
① 使用new关键字创建对象
<script>
//创建对象方式1：
var obj = new Object();
console.log(obj);
console.log(typeof obj);
//给对象添加属性
obj.username = "张三";
obj.password = "123456";
//获取对象属性
console.log(obj.username);
</script>② 使用{}创建对象(常用)
<script>
//创建对象方式2
var obj1 = {
"uname":"李白",
pwd:"123",
"height":1.78,
//对象内的函数
"sleep":function (){
console.log("睡觉...")
}
};
</script>
//获取函数
obj1.sleep();④ this关键字
-
在函数外面：this关键字指向window对象（代表当前浏览器窗口）
-
在函数里面：this关键字指向调用函数的对象
<script>
//函数外this：窗体对象 window
console.log(this);
function getName(){
console.log("getName执行了")
console.log(this.uname); //在函数内 谁调用就是谁
}
var obj1 = {
"uname":"李白",
"height":1.87,
"get":getName //属性get 属性值引用getName方法
}
var obj2 = {
"uname":"杜甫",
"weight":65.5,
"get":getName
};
//console.log(obj1);
obj1.get(); //李白
obj2.get(); //杜甫
console.log("---------------------");
//关于引用传递
function change(o){
o.uname="安其拉"
}
var obj3 = {
"uname":"王安石",
"height":1.87
}
console.log(obj3); //王安石
change(obj3);
console.log(obj3); //安其拉
</script>(5).数组(重点)
① 创建数组
<script>
//创建数组
var arr1 = new Array();
//添加数据
arr1.push(1);
arr1.push(10);
arr1.push("你好");
arr1.push("世界");
//可变形参
arr1.push(100,1000,'张三');
console.log(arr1);
//创建数据2
var arr2 = new Array("张三","李四","王五",10);
console.log(arr2);
//创建数组3
var arr3 = ["Bob","jim","marray"];
console.log(arr3);
</script>数组遍历
<script>
//数组遍历
var arr = ["张三","李四","王五","赵六"];
console.log(arr.length); //获取数组长度
//访问数组元素，下标从开始
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
};
// v:数组元素
console.log("--------------------");
arr.forEach(function (v){
console.log(v);
})
/*v:数组元素
i:元素对应下标*/
arr.forEach(function (v,i){
console.log(v+"--->"+i);
});
</script>数组常用函数
splice: 切割（开始删除的下标，删除的数量）
slice: 获取数组内指定范围数据 [开始下标，结束下标) 左闭右开
join:将数组元素按照指定的分隔符拼接到一起
<script>
var arr = ["张三","李四","王五","赵六"];
//js数组长度可变
console.log(arr);
arr.length=3; //设置数组长度为3
console.log(arr);
var arr1 = ["Bob","Jim","Marry","Jim"];
//join:将数组元素按照指定的分隔符拼接到一起
arr1.join("-");
console.log(arr1);
//indexOf:返回指定元素第一次、最后一次出现的下标
var indexOf = arr1.indexOf("Jim");
console.log(indexOf);
var number = arr1.lastIndexOf("Jim");
console.log(number);
//reverse:反转数组
arr1.reverse();
console.log(arr1); //['Jim', 'Marry', 'Jim', 'Bob']
//splice: 切割（开始删除的下标，删除的数量）
//arr1.splice(1,2);
console.log(arr1);
//slice: 获取数组内指定范围数据 [开始下标，结束下标) 左闭右开
var arr3 = ["张三","李四","王五","赵六"];
var strings = arr3.slice(1,3);
console.log(strings);
</script>二、JSON(重点)
json (JavaScript Object Notation) 是一种数据格式，在开发中凡是涉及到『跨平台数据传输』，JSON格式一定是首选。JS 对象简谱。
<script>
json:数据格式
json对象{"key":"value"}
json数组[{"key":"value"},{"key":"value"}]
</script>JSON嵌套
<script>
console.log("---------- json对象 ----------")
//json对象1
var json1 = {
"usname":"李白",
"height":"1.87",
"sex":"男",
}
//json对象2 对象套对象
var json2 = {
"usname":"杜甫",
"height":"1.76",
"sex":"男",
"wife":{ //嵌套
"uname":"杜甫媳妇",
"height":"1.69",
"sex":"女",
}
}
//获取杜甫媳妇的名字
console.log(json2.wife.uname);
</script><script>
var json3 = {
"uname":"王安石",
"height":"1.75",
"sex":"男",
"wife":{ //王安石的媳妇
"uname":"王翠花",
"height":"1.73",
"sex":"女",
},
"sons":[ //王安石的儿子们
{
"sname":"王1",
"sheight":"1.65",
"ssex":"男",
"hobby":["琴","棋","书","画"]
},
{
"sname":"王大拿",
"sheight":"1.55",
"ssex":"男",
"hobby":["抽烟","喝酒","烫头"]
},
]
};
//遍历王安石的儿子们
var sons = json3.sons;
sons.forEach(function (value){
console.log(value);
//获取他们的爱好
var hobby = value.hobby;
});
</script>JSON对象和JSON字符串互转
JSON.stringify() JSON.parse(str)
<script>
console.log("-------------- jons对象转为 字符串 --------------")
var jsonObj = {
"uname":"张三",
"height":"1.76",
"sex":"男"
}
//JSON.stringify json对象转字符串
let s = JSON.stringify(jsonObj);
console.log(s);
//Ctrl + R 快速换名
console.log("-------------- 字符串转为 jons对象 --------------")
//注意 json格式字符串 key value必须采用双引号包裹
var str = '{"uname":"张三","height":"1.76","sex":"男"}';
// JSON.parse
var obj = JSON.parse(str);
console.log(obj);
</script>三、JavaScript的DOM
DOM是Document Object Model的缩写，意思是『文档对象模型』——将HTML文档抽象成模型，再封装成对象方便用程序操作。
DOM树的概念
浏览器把HTML文档从服务器上下载下来之后就开始按照『从上到下』的顺序『读取HTML标签』。每一个标签都会被封装成一个『对象』。
而第一个读取到的肯定是根标签html，然后是它的子标签head，再然后是head标签里的子标签……所以从html标签开始，整个文档中的所有标签都会根据它们之间的『父子关系』被放到一个『树形结构』的对象中。
这个包含了所有标签对象的整个树形结构对象就是JavaScript中的一个可以直接使用的内置对象：document。
例如，下面的标签结构：
会被解析为：
各个组成部分的类
整个文档中的一切都可以看做Node。各个具体组成部分的具体类型可以看做Node类型的子类。
| 组成部分 | 节点类型 | 具体类型 |
|---|---|---|
| 整个文档 | 文档节点 | Document |
| HTML标签 | 元素节点 | Element |
| HTML标签内的文本 | 文本节点 | Text |
| HTML标签内的属性 | 属性节点 | Attr |
| 注释 | 注释节点 | Comment |
父子关系：
前辈后代关系：
DOM操作 (节点查询、增删改)
由于实际开发时基本上都是使用JavaScript的各种框架来操作，而框架中的操作方式和我们现在看到的原生操作完全不同，所以下面罗列的API仅供参考，不做要求。
① 在整个文档范围内查询元素节点
| 功能 | API | 返回值 |
|---|---|---|
| 根据id值查询 | document.getElementById(“id值”) | 一个具体的元素节 |
| 根据标签名查询 | document.getElementsByTagName(“标签名”) | 元素节点数组 |
| 根据name属性值查询 | document.getElementsByName(“name值”) | 元素节点数组 |
| 根据类名查询 | document.getElementsByClassName("类名") | 元素节点数组 |
<body>
<input type="text" value="111" id="in1" name="uname"> <br>
<input type="text" value="222" id="in2"> <br>
<input type="text" value="333" id="in3"> <br>
<input type="text" value="444" name="uname"> <br>
<script>
//通过id值获取页面元素
let byId = document.getElementById("in1");
console.log(byId);
console.log(byId.value);
//通过标签名获取 获取当前页面 指定的标签元素
let byTagName = document.getElementsByTagName("input");
console.log(byTagName);
//通过类名获取 获取当前页面所有指定的类名元素
var byClassName = document.getElementsByClassName("in2");
console.log(byClassName);
//通过name获取
let byName = document.getElementsByName("uname");
console.log(byName);
</script>
</body>②属性操作
测试：
<body>
<a href="http://www.baidu.com" id="a1">百度一下</a>
<br>
<button onclick="change()">点我变为神秘网站</button>
<div id="box">
<p>今天是个好日子</p>
</div>
<script>
function change() {
//1.获取要更改的标签
var aElement = document.getElementById("a1");
//2.让属性=值 更改属性值 此时会将百度改为bilibili
aElement.href='https://www.bilibili.com/';
//获取属性值
console.log(aElement.href);
}
console.log("--------------------获取数据-----------------------");
//获取id名为 box的div
var box = document.getElementById("box");
//只获取文本内容
var innerText = box.innerText;
console.log(innerText);
// <p>今天是个好日子</p> 获取了整个内容
var innerHTML = box.innerHTML;
console.log(innerHTML);
console.log("--------------------填充数据-----------------------");
//box.innerText='<h1>6666</h1>'; 不会解析html标签
box.innerHTML='<h1>6666</h1>'; //会解析html标签
</script>
</body>③在具体元素节点范围内查找子节点
| 功能 | API | 返回值 |
|---|---|---|
| 查找子标签 | element.children | 返回子标签数组 |
| 查找第一个子标签 | element.firstElementChild | 标签对象 |
| 查找最后一个子标签 | element.lastElementChild | 节点对象 |
④ 查找指定元素节点的父节点
| 功能 | API | 返回值 |
|---|---|---|
| 查找指定元素节点的父标签 | element.parentElement | 标签对象 |
⑤ 查找指定元素节点的兄弟节点
| 功能 | API | 返回值 |
|---|---|---|
| 查找前一个兄弟标签 | node.previousElementSibling | 标签对象 |
| 查找后一个兄弟标签 | node.nextElementSibling | 标签对象 |
⑥ 标签体的操作
| 需求 | 操作方式 |
|---|---|
| 获取或者设置标签体的文本内容 | element.innerText |
| 获取或者设置标签体的内容 | element.innerHTML |
⑦DOM增删改操作
| API | 功能 |
|---|---|
| document.createElement(“标签名”) | 创建元素节点并返回，但不会自动添加到文档中 |
| document.createTextNode(“文本值”) | 创建文本节点并返回，但不会自动添加到文档中 |
| element.appendChild(ele) | 将ele添加到element所有子节点后面 |
| parentEle.insertBefore(newEle,targetEle) | 将newEle插入到targetEle前面 |
| parentEle.replaceChild(newEle, oldEle) | 用新节点替换原有的旧子节点 |
| element.remove() | 删除某个标签 |
<body>
<div id="box">
<p id = "p1">111</p>
<p id = "p2">222</p>
<p id = "p3">333</p>
<p id = "p4">444</p>
</div>
<script>
console.log("------------ 添加节点 ------------")
//1.创建节点
let newP = document.createElement("p");
newP.innerHTML="我是新的p标签";
//2.获取当前box节点，尾部追加
let boxDiv = document.getElementById("box");
//boxDiv.appendChild(newP);
//3.插入到指定节点前面
var p3 = document.getElementById("p3");
boxDiv.insertBefore(newP,p3)
console.log("------------ 删除节点 ------------")
let p4 = document.getElementById("p4");
//删除p4的节点
p4.remove();
//删除p4的父节点
//p4.parentElement.remove();
</script>
</body>四、JavaScript的事件驱动(很重要)
① 事件的概念
-
HTML 事件是发生在 HTML 元素上的“事情”， 是浏览器或用户做的某些事情
-
事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。
② 常见事件
| 属性 | 此事件发生在何时... |
|---|---|
| onclick | 当用户点击某个对象时调用的事件句柄。 |
| ondblclick | 当用户双击某个对象时调用的事件句柄。 |
| onchange | 域的内容被改变。 |
| onblur | 元素失去焦点。 |
| onfocus | 元素获得焦点。 |
| onload | 一张页面或一幅图像完成加载。 |
| onsubmit | 确认按钮被点击；表单被提交。 |
| onkeydown | 某个键盘按键被按下。 |
| onkeyup | 某个键盘按键被松开。 |
| onmousedown | 鼠标按钮被按下。 |
| onmouseup | 鼠标按键被松开。 |
| onmouseout | 鼠标从某元素移开。 |
| omouseover | 鼠标移到某元素之上。 |
| onmousemove | 鼠标被移动。 |
③ 事件绑定的方式
<!--方式1，操作页面设置属性-->
<button onclick="show()">点我</button>
<br>
<button id="btn">来啊</button>
<script>
//事件: 操作页面元素想要做什么事情
//事件绑定: 将一个事件与页面元素进行映射
/*
绑定事件的方式
方式一: 页面元素开始标签内 事件名="函数"
方式二: 获取页面元素
对页面元素进行事件绑定*/
function show(){
alert("this is show()")
}
//方式二: 获取界面元素，绑定单击事件
var btnElement = document.getElementById("btn");
btnElement.onclick=function (){
alert("this is 来啊 的效果");
}
onload 加载完成事件： 页面加载完成之后，常用于做页面 js 代码初始化操作
onclick 单击事件： 常用于按钮的点击响应操作。
onblur 失去焦点事件： 常用用于输入框失去焦点后验证其输入内容是否合法。
onchange 内容发生改变事件： 常用于下拉列表和输入框内容发生改变后操作
onsubmit 表单提交事件： 常用于表单提交前，验证所有表单项是否合法
</script>鼠标事件
<!--鼠标事件-->
<body>
<div id="box" onclick="f1()" ondblclick="f2()" onmousemove="f3()"
onmousedown="f4()" onmouseup="f5()"></div>
<script>
function f1(){
console.log("鼠标被单击了")
}
function f2(){
console.log("鼠标被双击了了")
}
function f3(){
console.log("鼠标在移动")
}
function f4(){
console.log("鼠标按下")
}
function f5(){
console.log("鼠标抬起")
}
</script>
</body>文档事件
<body>
<!--获得焦点事件
onclick
onblur: 光标在输入框内
onfocus: 光标离开输入框
onchange: 内容发生改变 触发onchange
-->
<input type="text" id="in1" onblur="b()" onfocus="f()" onchange="c(this)">
<script>
function b(){
console.log("失去焦点了");
}
function f(){
console.log("获得焦点了");
}
function c(a){
console.log("内容改变了");
console.log(a);
console.log(a.value);
}
</script>练习：动态表格
<body>
<table border="1" width="400" style="text-align: center" id="tab">
<tr>
<th>序号</th>
<th>用户名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
<td><button onclick="del(this)">删除</button></td>
</tr>
<tr>
<td>2</td>
<td>热巴</td>
<td>女</td>
<td><button onclick="del(this)">删除</button></td>
</tr>
</table>
<div>
序号: <input type="text" id="no" ><br>
用户: <input type="text" id="uname"><br>
性别: <input type="text" id="gender"><br>
<button onclick="add()">添加</button>
</div>
<script>
//删除
function del(ele){
ele.parentElement.parentElement.remove()
//第二种方式:event.target 拿到触发当前函数,获得this
}
//添加
function add(){
let no = document.getElementById("no");
let uname = document.getElementById("uname");
let gender = document.getElementById("gender");
//2.创建一个tr元素对象表
var tr = document.createElement("tr");
let td1 = document.createElement("td");
td1.innerText=no.value;
let td2 = document.createElement("td");
td2.innerText=uname.value;
let td3 = document.createElement("td");
td3.innerText= gender.value;
//标签体操作，可以解析标签
let td4 = document.createElement("td");
td4.innerHTML="<button onclick=\"del(this)\">删除</button>"
//3.将td添加到tr
tr.append(td1,td2,td3,td4);
console.log(tr);
//4.获取当前表格，添加tr到末尾
let tab = document.getElementById("tab");
tab.appendChild(tr);
//清空添加表单
document.getElementById("no").value="";
document.getElementById("uname").value="";
document.getElementById("gender").value="";
}
</script>
</body>五、正则表达式(RegExp)
常用方法 match 匹配、replace 替换、split 分割
i：忽略大小写 、g：全局匹配
<script>
var str = "Hello World GOOD";
//匹配模式： g 全局匹配
var reg = /o/g;
var match = str.match(reg);
console.log(match);//['o', 'o']
//匹配模式： i 忽略大小写
var reg1 = /o/ig; //全局忽略大小写匹配
var match1 = str.match(reg1);
console.log(match1);
</script>创建与校验：
<script>
var str = "a";
//创建方式一: 对象方式
var reg1 = new RegExp("a");
//校验
var b = reg1.test(str);
console.log(b);//true
//创建方式二: 变量形式
var reg2 = /a/;
let b1 = reg2.test(str);
console.log(b1);//true
</script>字符集合:
| 语法格式 | 示例 | 说明 |
|---|---|---|
| [字符列表] | 正则表达式：[abc] 含义：目标字符串包含abc中的任何一个字符 目标字符串：plain 是否匹配：是 原因：plain中的“a”在列表“abc”中 | 目标字符串中任何一个字符出现在字符列表中就算匹配。 |
| [^字符列表] | [^abc] 含义：目标字符串包含abc以外的任何一个字符 目标字符串：plain 是否匹配：是 原因：plain中包含“p”、“l”、“i”、“n” | 匹配字符列表中未包含的任意字符。 |
| [字符范围] | 正则表达式：[a-z] 含义：所有小写英文字符组成的字符列表 正则表达式：[A-Z] 含义：所有大写英文字符组成的字符列表 | 匹配指定范围内的任意字符。 |
元字符:
| 代码 | 说明 |
|---|---|
| . | 匹配除换行字符以外的任意字符。 |
| \w | 匹配字母或数字或下划线等价于[a-zA-Z0-9_] |
| \W | 匹配任何非单词字符。等价于A-Za-z0-9_ |
| \s | 匹配任意的空白符，包括空格、制表符、换页符等等。等价于[\f\n\r\t\v]。 |
| \S | 匹配任何非空白字符。等价于\f\n\r\t\v。 |
| \d | 匹配数字。等价于[0-9]。 |
| \D | 匹配一个非数字字符。等价于0-9 |
| \b | 匹配单词的开始或结束 |
| ^ | 匹配字符串的开始，但在[]中使用表示取反 |
| $ | 匹配字符串的结束 |
出现次数:
| 代码 | 说明 |
|---|---|
| * | 出现零次或多次 |
| + | 出现一次或多次 |
| ? | 出现零次或一次 |
| {n} | 出现n次 |
| {n,} | 出现n次或多次 |
| {n,m} | 出现n到m次 |
2507
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
