正则表达式及元字符
01-正则表达式基本使用
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<script>
// 定义正则表达式 reg里面存的是对象
let reg = /前端/
// 2.检测是否匹配 test
// 如果正则表达式与指定的字符串匹配，则返回true，否则返回false
let str = '我们大家都在学前端'
// console.log(reg.test(str));
// 3.检索 exec() 找到返回的是数组，含索引号。找不到返回null
console.log(reg.exec(str));
script>
body>
html>
02-元字符之边界符
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<script>
console.log(/哈/.test('哈哈')); //true
console.log(/哈/.test('二哈')); //true
// ^ 开头
console.log(/^哈/.test('二哈')); // false
console.log(/^哈/.test('我开心的哈哈大笑')); //false
// $ 结尾
console.log(/哈$/.test('二哈')); // true
// ^开头，$结尾
console.log(/^哈$/.test('哈哈')); // false
console.log(/^哈$/.test('哈')); // true 精确匹配
script>
body>
html>
03-元字符之量词
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<script>
// console.log(/a/.test('a'));
// // 量词* n > = 0 重复零次或更多次
// console.log(/a*/.test('')); //true
// console.log(/a*/.test('a'));
// console.log(/a*/.test('aa'));
// console.log(/a*/.test('aaaaaaaaa'));
// console.log(/a*/.test('b')); //true
// console.log('-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -');
// // 量词+ n >=1 重复一次或更多次
// console.log(/a+/.test('')); //false
// console.log(/a+/.test('a'));
// console.log(/a+/.test('aa'));
// console.log(/a+/.test('aaaaaaaaa'));
// console.log(/a+/.test('b')); //false
// console.log('------------------------------------------------------------------------------');
// // 量词? n=0||1 重复零次或一次
// console.log(/^a?$/.test('')); //true
// console.log(/^a?$/.test('a')); //true
// console.log(/^a?$/.test('aa')); //false
// console.log('------------------------------------------------------------------------------');
// {n} 只能出现n次
console.log(/^a{3}$/.test('aa')); //false
console.log(/^a{3}$/.test('aaa')); //true
console.log(/^a{3}$/.test('aaaa')); //false
// {n,} >=n 只能出现n次或更多次
console.log(/^a{3,}$/.test('aa')); //false
console.log(/^a{3,}$/.test('aaa')); //true
console.log(/^a{3,}$/.test('aaaa')); //true
// {n,m} >=n <=m 只能出现n-m次
console.log(/^a{3,6}$/.test('aa')); //false
console.log(/^a{3,6}$/.test('aaa')); //true
console.log(/^a{3,6}$/.test('aaaa')); //true
console.log(/^a{3,6}$/.test('aaaaaaaa')); //false
script>
body>
html>
04-元字符之字符类[]使用
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<script>
// console.log(/abc/.test('abc')); // true
// console.log(/abc/.test('ab')); // false
// 字符类 [] 后面的字符串只要包含前面任意一个字符，都返回true
// console.log(/[abc]/.test('abc')); //true
// console.log(/[abc]/.test('andy')); //true
// console.log(/[abc]/.test('')); //false
// console.log(/[abc]/.test('baby')); //true
// 字符类 [-] 连字符
console.log(/^[abc]$/.test('abc')); // false 以任意一个a或b或c开头或结尾
console.log(/^[abc]$/.test('a')); // true
console.log(/^[abc]$/.test('b')); // true
console.log(/^[abc]$/.test('c')); // true
// 26个英文字母选其中一个
console.log(/^[a-z]$/.test('c')); //true
console.log(/^[a-zA-Z]$/.test('c')); // 不分大小写
console.log(/^[a-zA-Z]$/.test('CC')); //false
console.log(/^[a-zA-Z0-9]$/.test('D')); //可以出现大写可以出现小写可以出现数字
console.log(/^[a-zA-Z0-9-_]$/.test('6')); //可以出现-_两个符号
script>
body>
html>
05-验证用户名案例
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>验证用户名案例title>
<style>
span {
display: inline-block;
width: 250px;
height: 30px;
background-color: pink;
vertical-align: middle;
line-height: 30px;
padding-left: 15px;
}
.error {
color: red;
background: url(error1.png) no-repeat left center;
}
.right {
color: green;
background: url(right.png) no-repeat left center;
}
style>
head>
<body>
<input type="text">
<span>span>
<script>
let input = document.querySelector('input')
let span = input.nextElementSibling //下一个兄弟元素
input.addEventListener('blur', function() {
// alert(1)
if (/^[a-zA-Z0-9-_]{6,16}$/.test(input.value)) {
span.className = 'right';
span.innerHTML = '输入正确'
} else {
span.className = 'error';
span.innerHTML = '只能输入6-16位字符'
}
})
script>
body>
html>
效果展示
06-过滤敏感词
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<textarea name="" id="" cols="30" rows="10">textarea>
<button>发布button>
<div>div>
<script>
let btn = document.querySelector('button')
let textarea = document.querySelector('textarea')
let div = document.querySelector('div')
btn.addEventListener('click', function() {
// 过滤用户输入的内容 g全局过滤
div.innerHTML = textarea.value.replace(/激情|基情/g, '**')
})
script>
body>
html>
效果展示
07-change事件
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>change事件title>
head>
<body>
<input type="text">
<script>
let input = document.querySelector('input')
// 当表单里面的值发生变化的时候触发，和blur不一样
// input事件 只要输入就会触发
// change事件 离开表单时按下鼠标后才触发
input.addEventListener('change', function() {
console.log(111);
})
script>
body>
html>