day12 正则对象和DOM
1.回顾
var reg = /正则表达式/修饰符 var reg = new RegExp(正则表达式,修饰符) 修饰符 g 执行一个全局的匹配 i 不区分大小写 检测方法 字符串自带的检测方法 split replace match search 正则对象的检测方法 test exec
2.正则对象
2.1正则对象元字符
-
正则元字符简介
-
定义：元字符就是我们在正则定义中提到的 正则中的特定字符和特定字符组合。用来指代一些特定匹配内容
-
-
正则元字符详解
-
. 在正则表达式中 . 表示 要检测 除了了换行符(\n)之外的 其他字符
-
[范围] 中括号 在正则中 表示 要检测一个范围内的内容 例如:[0-9a-zA-Z] 表示 检测数字或小写字母或大写字母都可以
-
[^范围] 中括号^ 在正则中 表示 要检测一个范围之外的内容
-
\d 和 \D : \d 要检测数字 相当于[0-9] \D 要检测所有非数字字符
-
\w 和 \W : \w 要检测数字、字母或下划线 \W 要检测非数字，非字母，非下划线
-
\s 和 \S ：\s 要检测 空格、\n、\t（制表符）、空字符串等空白字符 \S 要检测 非空白字符
-
^ 和 $
-
^写法：/^指定内容/ 表示 这个正则表达式要求 被检测的字符串 必须以指定内容 开头
-
$写法：/指定内容$/ 表示 这个这则要求 被检测的字符串 必须以 指定内容 结尾
-
-
^ 和 $组合使用(严格模式)
-
写法：/^指定内容$/
-
-
-
作用：这种写法 被称为 正则的严格模式 表示 要求检测的字符串必须是 正则指定的内容 既不能多 也不能少
script> // 1. .匹配除换行符外的任意内容 \n换行符 \t空格符 var str = "0823\nwe\tb"; var reg = /./g; console.log(reg.exec(str));//0 console.log(reg.exec(str));//8 console.log(reg.exec(str));//2 console.log(reg.exec(str));//3 console.log(reg.exec(str));//w console.log(reg.exec(str));//3 console.log(reg.exec(str));//\t // 2. [字符集] 匹配[]中的任意字符 var str = "0823web0823web"; var reg = /[a-zA-Z0-9]/g;//匹配a-z A-Z 0-9之间的任意字符 console.log(reg.exec(str));//0 console.log(reg.exec(str));//8 console.log(reg.exec(str));//2 // 3.[^字符串] 匹配除[]中的任意字符 var str = "0$@82op3web0823web"; var reg = /[^0-9]/g;//不匹配0-9的字符 其他全部匹配到 console.log(reg.exec(str));//$ console.log(reg.exec(str));//@ console.log(reg.exec(str));//o console.log(reg.exec(str));//p // 4.\d 匹配0-9的任意数字 \D 匹配非0-9的任意数字 var str = "0823web$()"; var reg = /\d/g; var reg = /\D/g; console.log(reg.exec(str));//w console.log(reg.exec(str));//e console.log(reg.exec(str));//b console.log(reg.exec(str));//$ // 5.\w 匹配数字 字母 下划线 \W 匹配非字母 非数字 非下划线 var str = "0823_web$()"; var reg = /\w/g; var reg = /\W/g; console.log(reg.exec(str));//0 console.log(reg.exec(str));//8 console.log(reg.exec(str));//2 console.log(reg.exec(str));//3 console.log(reg.exec(str));//_ console.log(reg.exec(str));//w console.log(reg.exec(str));//e console.log(reg.exec(str));//b console.log(reg.exec(str));//null // 6.\s匹配空格 \S匹配非空格 var str = "08\t2 3_web$()"; var reg = /\s/g; var reg = /\S/g; console.log(reg.exec(str)); console.log(reg.exec(str)); // 7.^a 必须以a开头 var str = "w0823web"; var reg = /^[0-9]/; console.log(reg.test(str));//fase // 8. a$ 必须以a结尾 var str = "0823web"; var reg = /[0-9]$/; console.log(reg.test(str));//fase // 9.^ 和 $可以组合使用 构成严格模式 var reg = /^1[3-9]\d{9}$/; var str = "1334567890"; console.log(reg.test(str));//fase </script>
2.2正则量词
-
当正则内容 出现 重复内容的时候 我们可以使用量词 来实现效果
-
?
-
写法：/\d?/
-
作用：?表示 规定其前面的内容 出现0次或1次 例如上述代码 就表示 要求检测的字符串中 出现0次或1次数字
-
-
+
-
写法：/\d+/
-
作用：+表示 规定其前面的内容 出现至少1次 例如上述代码中 就表示 要求检测的字符串中 至少出现1次
-
-
*
-
写法：/\d*/
-
作用：*表示 规定其前面的内容 可以出现0次或 任意多次
-
-
{x,y}
-
写法：/\d{x,y}/
-
说明：x 和 y 都是 数字
-
作用：{x,y} 表示 规定其前面的内容 至少出现x次 至多出现y次
-
-
{x}
-
写法：/\d{x}/
-
说明：x 是 数字
-
作用：{x} 表示 规定其前面的内容 必须出现x次
-
<script>
//1. a? 匹配a字符0次或者1次 a这个字符可有可无
var str = "0823web";
var str = "web";
var reg = /\d?/;// 匹配0-9的任意字符 匹配0次或者1次都可以
console.log(reg.test(str));//true
// 验证地址栏 \a 转义字符 a在正则表达式中有特殊函数 加上\就会失去原本的含义
var str = "http://www.jd.com";
var str = "https://www.jd.com";
var reg = /https?:\/\/www\.jd\.com/;
console.log(reg.test(str));//true
// 2 a* 匹配a字符0次或者多次 尽可能的多次连续匹配
var str = "11111aa11aa123aaaa";
var reg = /a*/g;
console.log(reg.exec(str));
// 3. a+ 匹配a字符只至少1次 数字 字母 下划线\w
var str = "https://www.baidu.com";
var str = "https://www.jd.com";
var str = "https://www.taobao.com";
var str = "https://www.360.com";
var str = "https://www.a.com";
var str = "https://www.a123.com";
var str = "https://www..com";
var reg = /https?:\/\/www\.\w+\.com/;
console.log(reg.test(str));//false
// 4.{n,m} 至少出现n次 最多出现m次
var str = "123";
var reg = /^\d{1,2}$/;
console.log(reg.test(str));//false
// 5.{n} 只能出现n次
var str = "123";
var reg = /^\d{2}$/;
console.log(reg.test(str));//false
// 6.{n,} 至少出现n次 最多任意次
var str = "1";
var reg = /^\d{2,}$/;
console.log(reg.test(str));//false
</script>
2.3或运算和分组
-
1.或运算：
-
在正则中 或运算的写法 是 |
-
例如：/^张三|李四|王二$/
-
表示 该正则 要检测的字符串 必须是 张三或李四或王二 这三个名字中的一个
-
-
2.分组
-
在正则中 如果我们想让 某一部分内容 作为一个整体存在 可以使用小括号 将其包裹 被小括号包起来的部分 称为分组
-
由于 有分组的正则 可以 使用分组 分别进行验证 因此我们也可以 单独获取分组 验证的结果
-
写作：RegExp.$n
-
表示：获取第n个分组的检测结果
-
注意：如果想 通过这种写法 单独获取 某一分组检测的结果 需要 事先对正则 进行检测
-
-
<script> // 1 | 匹配任意一个 var reg = /https?:\/\/www\.\w+\.(com|cn|net|org)/; var url = "cn"; var url = "http://www.baidu.net"; console.log(reg.test(url)); // 2 分组 () </script>
-
手机号加密
-
第4-7位显示*
// 3.手机号加密
var str = "13245678901";// 132****8901
var reg = /^(1[3-9]\d{1})(\d{4})(\d{4})$/
// replace中可以使用$n 第n个分组
var a = str.replace(reg, "$1****$3");
console.log(a);
2.4前瞻后顾
-
?=
-
写法：/xxx(?=yyy)/
-
上述正则 表示 要求 xxx内容之后 必须是 yyy内容 如果不是yyy内容 就检测失败
-
-
-
?!
-
写法：/xxx(?!yyy)/
-
表示 要求xxx内容的后面 不能是 yyy
-
-
-
?<=
-
写法：/(?<=yyy)xxx/
-
表示 要求xxx内容的前面 必须是 yyy
-
-
-
?<!
-
写法：/(?<!yyy)xxx/;
-
表示 要求xxx内容前面 不能是 yyy
-
<script> //--------------前瞻----------------- // 前瞻(?=a) 正向肯定预查 后面必须跟a字符 var str = "www123com123"; var reg = /\d(?=\d)/g;// 检测数字 检测的数字后边必须跟数字 console.log(reg.exec(str));//1 console.log(reg.exec(str));//2 console.log(reg.exec(str));//1 console.log(reg.exec(str));//2 console.log(reg.exec(str));//null // 负前瞻(?!a) 正向否定预查 后面不能跟a字符 var str = "www123com123"; var reg = /\d(?!\d)/g;//检测数字 检测的数字后面不能跟数字 console.log(reg.exec(str));//3 console.log(reg.exec(str));//3 //--------------后顾----------------- // 后顾(?<=a) 反向肯定预查 前面必须跟a字符 var str = "www123com123"; var reg = /(?<=\d)\d/g;//检测数字 检测的数字前面必须是数字 console.log(reg.exec(str));//2 console.log(reg.exec(str));//3 console.log(reg.exec(str));//2 console.log(reg.exec(str));//3 // 负后顾(?<!a) 反向否定预查 前面不能跟a字符 var str = "www123com123"; var reg = /(?<!\d)\d/g;//检测数字 检测的数字前面不能是数字 console.log(reg.exec(str));//1 console.log(reg.exec(str));//1 </script>
3.DOM
3.1DOM简介
-
DOM：document Object Model 文档对象模型，提供了一些api方法来操作html文档
-
API：应用程序在js中预先定义好的而一些函数(方法)
3.2DOM原理
-
DOM为了能让开发者操作html文档中的元素，对html文档进行了抽象化处理，将html文档抽象成一个DOM树 树中的节点就是标签
3.3DOM获取元素
-
get系列获取
-
document.getElementsByTagName("标签名") 通过标签名获取元素
-
document.getElementsByClassName("类名") 通过类名获取元素
-
document.getElementById("id名") 通过id获取元素
-
-
query系列获取
-
document.querySelector("css选择器")
-
获取整个文档下该css选择器的元素列表中的第一个
-
-
document.querySelectorAll("css选择器")
-
获取整个文档下该css选择器的元素列表集合
-
<script> // get系列获取 var oDiv = document.getElementsByTagName("div"); var olist = document.getElementsByTagName("li"); console.log(oDiv); console.log(olist); // query系列 // querySelector("css选择器") css选择器：类名 id选择器 群组选择器 后代 子代 var li = document.querySelector("li"); console.log(li); var li = document.querySelectorAll("li"); console.log(li);//NodeList(10) [li, li, li, li, li, li, li, li, li, li] var ul = document.querySelector(".box"); console.log(ul) //querySelectorAll("css选择器") var list = document.querySelectorAll(".box li"); console.log(list) </script>==注意：query系列不支持ie低版本==
-
-
两者区别
-
get动态获取，query静态获取
-
<script>
// 1.获取元素
var listGet = document.getElementsByTagName("li");
var listQuery = document.querySelectorAll("li");
console.log(listGet, listQuery);//HTMLCollection(5) NodeList(5)
// get系列是动态获取 后续添加或者删除元素 会拿到最新的元素个数
// query系列是静态获取
var btn = document.getElementsByTagName("button")[0];
var ul = document.getElementsByTagName("ul")[0];
btn.onclick = function () {
ul.innerHTML += "<li>6</li>";
console.log(listGet, listQuery);//HTMLCollection(6) [li, li, li, li, li, li] NodeList(5) [li, li, li, li, li]
}
</script>
3.4DOM获取节点
3.4.1获取子节点
-
父元素.children 获取父元素下的所有的元素节点
-
父元素.childNodes 获取父元素下所有的节点(文本节点 注释节点 元素节点)
-
节点分类
-
元素节点：html文档中所有元素标签抽象出来 就是元素节点
-
文本节点：html文档中的空格 换行符及文字都是文本节点
-
属性节点：标签中的属性抽象出来，就是属性节点
-
注释节点：注释内容抽象出来就是注释节点
-
-
获取节点类型 节点.nodyType
-
元素节点------1
-
属性节点------2
-
文本节点------3
-
注释节点------8
-
-
获取节点名称 节点.nodeName
-
元素节点----标签名大写
-
文本节点-----#text
-
注释节点-----#comment
-
-
获取/设置节点内容 节点.nodeValue
-
可以操作文本节点和注释节点，==元素节点无法操作==
-
<ul>123
<!-- 这是注释 -->
<li class="box">li标签</li>
</ul>
<script>
// 1.获取子节点
var oul = document.getElementsByTagName("ul")[0];
// 父元素.children 获取父元素下的元素节点
console.log(oul.children);// HTMLCollection[li.box]
// 父元素.childNodes 获取父元素下所有的节点(文本节点 注释节点 元素节点)
console.log(oul.childNodes);// NodeList(5) [text, comment, text, li.box, text]
var list = oul.childNodes
// 2.获取节点类型 节点.nodeType
console.log(list[0].nodeType);//文本节点 3
console.log(list[1].nodeType);//注释节点 8
console.log(list[3].nodeType);//元素节点 1
// 3.获取节点名称 节点.nodeName 很重要
console.log(list[3].nodeName);//元素节点----获取的是标签名大写
console.log(list[2].nodeName);//文本节点-----#text
console.log(list[1].nodeName);//注释节点-----#comment
// 4.获取节点内容 节点.nodeValue 无法操作元素节点
console.log(list[3].nodeValue);//null 元素节点无法使用nodeValue，因为元素节点通过innerHTML和innerText获取内容
console.log(list[0].nodeValue);//文本节点-----123
console.log(list[1].nodeValue);//注释节点-----这是注释
// 5.设置节点内容 节点.nodeValue = 值 无法操作元素节点
list[0].nodeValue = "456";
list[1].nodeValue = "456注释";
// console.log()
</script>
4.面试题
get系列和query系列获取元素的区别
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
