发表于： 2023-03-02 21:21:48
0 277
今天的js知识点：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 正则表达式|(Regular Expression)是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象
// 通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式。
//语法： const 变量名= /表达式/
// const str = '正在学习前端'
// //1、定义规则
// const reg = /前端/
// //2、是否匹配 返回true 否则false
// // reg.test(str)
// console.log(reg.test(str))
//
// //3、探索(查找)符合规则的字符串
// // exec()方法 在一个指定字符串中执行一个搜索匹配
// // reg.exec(str) // 如果匹配成功 则返回一个数组， 否则返回 null
// console.log(reg.exec(str))
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
//元字符 ●元字符(特殊字符)
// 是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
// 比如，规定用户只能输入英文26个英文字母，普通字符的话abcdefghijklm....但是换成元字符写法:[a-z]
// 为了方便记忆和学习，我们对众多的元字符进行了分类:
// 边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾)
// console.log(/哈/.test('哈')) //true
// console.log(/哈/.test('二哈')) //true
// console.log('---------------------------------')
// //^表示开头
// console.log(/^哈/.test('哈')) //true
// console.log(/^哈/.test('哈哈')) //true
// //$表示结尾
// console.log(/^哈$/.test('哈')) //true 只有这种情况为 true 否则全是false
// console.log(/^哈$/.test('哈哈')) //false
// console.log(/^哈$/.test('二哈')) //false
// console.log('---------------------------------')
// //* 重复零次或更多次 类似于 >= 0次
// console.log(/^哈$/.test('哈')) //true
// console.log(/^哈*$/.test('')) //true
// console.log(/^哈*$/.test('哈')) //true
// console.log(/^哈*$/.test('哈哈')) //true
// console.log(/^哈*$/.test('二哈哈')) //false 开头只能是哈
// console.log(/^哈*$/.test('哈很傻')) //false 结尾只能是哈
// console.log(/^哈*$/.test('哈很哈')) //false 只能有哈
// //+ 重复一次或更多次 类似于 >= 1次
// console.log('---------------------------------')
// console.log(/^哈$/.test('哈')) //true
// console.log(/^哈+$/.test('')) //false
// console.log(/^哈+$/.test('哈')) //true
// console.log(/^哈+$/.test('哈哈')) //true
// console.log(/^哈+$/.test('二哈哈')) //false 开头只能是哈
// console.log(/^哈+$/.test('哈很傻')) //false 结尾只能是哈
// console.log(/^哈+$/.test('哈很哈')) //false 只能有哈
// //？ 重复零次或一次 类似于 0 || 1
// console.log('---------------------------------')
// console.log(/^哈?$/.test('')) //true
// console.log(/^哈?/.test('哈')) //true
// console.log(/^哈?$/.test('哈哈')) //false
// console.log(/^哈?$/.test('二哈哈')) //false 开头只能是哈
// console.log(/^哈?$/.test('哈很傻')) //false 结尾只能是哈
// console.log(/^哈?$/.test('哈很哈')) //false 只能有哈
// 量词{n} 写几，就必须出现几次
// console.log(/^哈{4}$/.test('哈')) //false
// console.log(/^哈{4}$/.test('哈哈')) //false
// console.log(/^哈{4}$/.test('哈哈哈')) //false
// console.log(/^哈{4}$/.test('哈哈哈哈')) //true
// console.log(/^哈{4}$/.test('哈哈哈哈哈')) //false
// console.log('---------------------------------')
//
// // 量词{n,} >= n
// console.log(/^哈{4,}$/.test('哈')) //false
// console.log(/^哈{4,}$/.test('哈哈')) //false
// console.log(/^哈{4,}$/.test('哈哈哈')) //false
// console.log(/^哈{4,}$/.test('哈哈哈哈')) //true
// console.log(/^哈{4,}$/.test('哈哈哈哈哈')) //true
// console.log('---------------------------------')
//
// // 量词{n,m} 逗号左右两侧千万不能有空格 >= n || <= m
// console.log(/^哈{4,6}$/.test('哈')) //false
// console.log(/^哈{4,6}$/.test('哈哈')) //false
// console.log(/^哈{4,6}$/.test('哈哈哈')) //false
// console.log(/^哈{4,6}$/.test('哈哈哈哈')) //true
// console.log(/^哈{4,6}$/.test('哈哈哈哈哈')) //true
// console.log(/^哈{4,6}$/.test('哈哈哈哈哈哈哈哈')) //false
// console.log('---------------------------------')
// 字符类（比如\d 表示0~9)
// //[] 匹配字符集和 后面的字符串只要包含abc 中任意一个字符，都返回true 。
// // [abc] 只匹配其中一个
// console.log(/^[abc]$/.test('a')) // true
// console.log(/^[abc]$/.test('b')) // true
// console.log(/^[abc]$/.test('c')) // true
// console.log(/^[abc]$/.test('ab')) // false
// console.log(/^[abc]{2}$/.test('ab')) // true
// console.log('---------------------------------')
// //字符类 [a-z] 只选1个
// console.log(/^[a-z]$/.test('y')) // true
// console.log(/^[A-Z]$/.test('y')) // false
// console.log(/^[A-Z]$/.test('Y')) // true
// console.log(/^[0-9]$/.test(8)) // true
// console.log(/^[0-zA-Z0-9]$/.test(8)) // true
// console.log(/^[0-zA-Z0-9]$/.test('x')) // true
// console.log(/^[0-zA-Z0-9]$/.test('X')) // true
// console.log('---------------------------------')
// // []里面加上 ^ 取反符号 比如
// //[^a-z]匹配除了小写字符以外的字符
// console.log(/^[^a-z]$/.test('y')) // false
// console.log(/^[^a-z]$/.test(2)) // true
// console.log(/^[^a-z]$/.test('A')) // true
// console.log('---------------------------------')
// // .匹配除了换行符之外的任何单个符号
//预定义类
// \d 相当于 [0-9]
// \D 相当于 [^0-9]
// \w 相当于 [A-Za-z0-9_]
// \W 相当于 [^A-Za-z0-9_]
// \s 匹配空格(包括换行符、制表符、空格符) 相当于 [\t\r\n\v\f]
// \S 匹配非空格的符号 相当于 [^\t\r\n\v\f]
//例子 日期格式： ^\d{4}-\d{1,2}-\d{1,2}
// 修饰符
// i是单词ignore的缩写，正则匹配时字母不区分大小写
// g是单词global的缩写，匹配所有满足正则表达式的结果
console.log(/^java/.test('java')) //true
console.log(/^java/.test('JAVA')) //false
console.log(/^java/i.test('JAVA')) //true
// 替换 replace 替换
// 语法： 字符串.replace(/正则表达式/,'替换的文本')
const str = 'java是一门编程语言，学完JAVA工资很高'
// const re = str.replace(/java|JAVA/g,'前端')
const re = str.replace(/java/ig,'前端')
console.log(re)
</script>
</body>
</html>
小案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
span {
display: inline-block;
width: 250px;
height: 30px;
vertical-align: middle; /* vertical-align 属性设置元素的垂直对齐方式。 */
line-height: 30px;
padding-left: 15px;
}
.error {
color: red;
background: url("../../js2-DOM/images/5.png") no-repeat left center;
width: 20px;
}
.right {
color: green;
background: url("../../js2-DOM/images/6.png") no-repeat center;
width: 20px;
}
</style>
</head>
<body>
<input type="text">
<span></span>
<script>
//规则
const reg = /^[a-zA-Z0-9-_]{6,16}$/
const input = document.querySelector('input')
const span = input.nextElementSibling
input.addEventListener('blur', function () {
// console.log(reg.test(this.value))
if (reg.test(this.value)) {
span.innerHTML = '输入正确'
span.className = 'right'
} else {
span.innerHTML = '请输入6-16位的英文数字下划线'
span.className = 'error'
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>发布</button>
<div></div>
<script>
// 过滤敏感词案例
const tx = document.querySelector('textarea')
const btn = document.querySelector('button')
const div = document.querySelector('div')
btn.addEventListener('click', function () {
// console.log(tx.value)
div.innerHTML = tx.value.replace(/激情|基情/g,'**')
tx.value = ''
})
</script>
</body>
</html>
返回列表
评论