正则表达式
创建和使用
<script>
创造方式
// 1.利用RegExp对象来创建正则表达式！！！
var regexp = new RegExp(/abc/) // 实例化出来了一个正则对象！！！
// 2.字面量方式直接创建
var rg = /abc/;
使用正则对象
// test进行搜索，搜索abc，里面是否包含（abc）返回布尔值
console.log(regexp.test('abcd'))//true
console.log(rg.test('abc')) //true
</script>
边界符
例：
<script>
var rg = /abc/;
console.log(rg.test('abc')) // true
console.log(rg.test('abcd')) // true
console.log(rg.test('adbcd')) // false
console.log(rg.test('aabcd')) // true
// 边界符 ^
var reg = /^abc/
console.log(reg.test('abc')); // true
console.log(reg.test('abcd')); // true
console.log(reg.test('dabc')) // false
console.log(reg.test('aabc')); // false
// 边界符号 $
var reg1 = /abc$/;
console.log(reg1.test('abcd')) // false
console.log(reg1.test('abc')) // true
console.log(reg1.test('abcc')) // false
</script>
字符类
<script>
var reg = /[abc]/ // 只要包含a 或者 包含b 或者包含c，都会返回true
console.log(reg.test('a'))
console.log(reg.test('b'))
console.log(reg.test('c'))
console.log(reg.test('boy'))
console.log(reg.test('angel'))
console.log(reg.test('baby'))
</script>
<script>
var reg1 = /^[abc]$/; // 只有a 或者 b 或者c
console.log(reg1.test('aa')) // false
console.log(reg1.test('bb'))
console.log(reg1.test('a'))
console.log(reg1.test('b'))
console.log(reg1.test('c'))
console.log(reg1.test('abc'))
</script>
<script>
var reg1 = /^[a-z]$/ ; // 只能是26个应为字母，并且是小写的！！！ 只能是26个英文字母中某一个字母，并且是小写，才能返回true
console.log(reg1.test('1'))
var reg2 = /^[a-zA-Z0-9_-]$/ // 26个大小写英文字母，数字，_-
console.log(reg2.test('a'))
console.log(reg2.test('A'))
console.log(reg2.test(8))
console.log(reg2.test('-')) // true
console.log(reg2.test('!')) // false
</script>
<script>
// 需要特别注意，如果^符号写到了[],就是取反的意思，已经不是在以。。。开头的意思了！！！
var reg2 = /^[^a-zA-Z0-9_-]$/ // 26个大小写英文字母，数字，_-。。需要
console.log(reg2.test('a'))
console.log(reg2.test('A'))
console.log(reg2.test(8))
console.log(reg2.test('-')) //
console.log(reg2.test('!')) // true
</script>
<script>
var reg = /^(abc){3}$/ // 我想让abc重复三次 可以使用 ()
console.log(reg.test('abccc')) // false
console.log(reg.test('abcabcabc')) // true
// 小括号就是有限执行！！！
</script>
量词
<script>
var reg = /^a$/ // 只能是a
console.log(reg.test('a')) // true
console.log(reg.test('aa')) // false
// 学习量词 * >= 0 可以出现0次或者出现多次！！！
var reg1 = /^a*$/
console.log(reg1.test(''))
console.log(reg1.test('aaaa'))
console.log(reg1.test('aabc'))
// + >=1 , 可以出现1次或者多次！！！
var reg2 = /^a+c$/;
console.log(reg2.test('a'))
console.log(reg2.test('')) // false
console.log(reg2.test('aaa')) // true
console.log(reg2.test('aaabc')) // false,没有匹配b
// ? 匹配到有一次或者0次！！！
var reg3 = /^a?$/
console.log(reg3.test('')) // true
console.log(reg3.test('a')) // true
console.log(reg3.test('aa')) // false
console.log(reg3.test('aaaaaa')) // false
{3} 就是重复了3次
var reg4 = /^a{3}$/;
console.log(reg4.test('')) // false
console.log(reg4.test('aa'))
console.log(reg4.test('aaa'))
console.log(reg4.test('aaaa'))
// {3,} 大于等于3
var reg5 = /^a{3,}$/
console.log(reg5.test('aaaaa'))
// {3,16} 大于等于3 并且 小于等于16
var reg6 = /^a{3,16}$/
console.log(reg6.test(''))
console.log(reg6.test('aaa'))
console.log(reg6.test('aaaa'))
console.log(reg6.test('aaaaa'))
</script>
案例：
1-用户名验证
<body>
<input type="text" class="username"> <span>请输入用户名</span>
<script>
// 英文字母 数字 下划线 - 有多少个字符！！！6 - 16
var reg = /^[a-zA-Z0-9_-]{6,16}$/
var input = document.querySelector("input")
var span = document.querySelector("span")
input.onblur = function() {
console.log("失去焦点！！")
if(reg.test(input.value)) {
span.innerHTML = "您输入的名字正确"
}else {
span.innerHTML = "您输入的名字不正确，请输入6-16位字符！！！"
}
}
</script>
</body>
2-座机号验证
<script>
// 010-12345678
// 0537-1234567
// [0-9] = \d == 整数的意思0 - 9
var reg = /^\d{3,4}-\d{7,8}$/
console.log(reg.test("010-12345678"))
</script>
3-字符串搜索并且替换
<body>
<textarea id="message"></textarea> <button>提交</button>
<div></div>
<script>
var text = document.querySelector("textarea")
var button = document.querySelector("button")
var div = document.querySelector("div")
button.onclick = function() {
// 点击时替换textarea中的敏感字
// | 或者 g: global 全局
div.innerHTML = text.value.replace(/死|擦/g, "*")
}
</script>
</body>
