从字符串到正则：JavaScript中的文本操作与模式匹配技巧

VaporGas

于 2024-09-03 16:06:13 发布

阅读量542

点赞数 19

本文链接：https://blog.csdn.net/weixin_52937170/article/details/141857285

版权

String对象及其应用

初级表单验证案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 表单校验，检验表单不为空时才能提交 -->
        <!-- 这里的action属性的值是一个本地页面，需要自己准备一个本地页面，将地址填上-->
		<form action="index.html" onsubmit="return jiaoyan()">
			用户名：<input type="text" id="username" placeholder="请输入用户名" />
			用户名：<input type="password" id="password" placeholder="请输入用户密码" />
			<input type="submit" value="提交"/>
		</form>
	</body>
	<script>
		function $(obj){
			return document.getElementById(obj);
		}
		function jiaoyan(){
			var username=$("username").value;
			var password=$("password").value;
			if(username=="" || password==""){
				alert("用户名或密码不能为空");
				return false;
			}else{
				return true;
			}
		}
	</script>
</html>

String对象的常用属性和方法

名称	描述
length	用于计算字符串中的字符个数
charAt	返回字符串对象中指定索引处的字符，索引从0开始
indexOf	返回某个子字符串在目标字符串中的首次出现位置
substr	从指定索引位置开始截取指定长度的字符串
substring	返回指定索引范围内的字符串
split	返回按照指定分隔符拆分的若干子字符串数组
replace	使用指定的字符串替代目标字符串中指定的子字符串

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
	</body>
		<script>
				var str = "ab,cd,ef,gc";
				console.log(str.length) //获取字符串长度
				console.log(str.charAt(1))  //获取指定下标的字符
				console.log(str.indexOf('c')) //获取第一次出现字符的位置
				console.log(str.lastIndexOf('c')); //获取最后一次出现字符的位置
				console.log(str.substr(2, 4))  //截取从起始下标开始的指定长度的字符串
				console.log(str.substring(2, 4)) //截取从起始下标到结束下标位置的字符串（包头不包尾）
				console.log(typeof str.split(",")) //按照分隔符截取出字符串数组
				console.log(str.split(",").join("-")) //将字符串数组按指定字符连接成一个新的字符串
				console.log(str.replace(",", "_")); //按照指定字符进行替换，只匹配第一个遇到的
				console.log(str.replaceAll(",","_")); //按照指定字符串进行替换，替换全部
			</script>
</html>

正则表达式

正则表达式概述

正则表达式是一种对文字进行模糊匹配的语言
描述或者匹配一系列符合某个句法规则的字符串的单个字符串

正则表达式的功能

实现数据格式的有效性验证
实现文本内容的替换和删除
实现文本模糊搜索

创建RegExp对象

RegExp是JavaScript中提供的一种用来完成有关正则表达式操作和功能的对象

两种创建方式：

方式一：

var reg=new RegExp("表达式","附加参数");

方式二：
```
var reg=/表达式/附加参数;
```

RegExp中的两个单词简写分别表示：

Regular:正规的

Expression:表达式

RegExp对象的附加参数

var recat = new RegExp("cat","g");
var pattern=/cat/g;

常用附加参数表示含义：

g：global,全局匹配,如果无g，只会匹配第一个单词cat,有g，匹配所有单词cat

i：不区分大小写匹配

m：可以进行多行匹配

常用方法

注意：test,exec是正则表达式的方法
正则表达式.test(字符串)
正则表达式.exec(字符串)

名称	描述
test	它指出在被查找的字符串中是否存在模式，返回true/false
exec	用正则表达式模式在字符串中运行查找，并返回包含该查找结果的一个数组

例1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
	</body>
	<script>
			var str = "white CATS, black cats";
			var regex = new RegExp("cat", "gi");
			//var regex=/cat/gi;
			var result=regex.test(str);
			document.write(result)
	</script>
</html>

例2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
	</body>
	<script>
	    var str = "white CATS, black cats";
	    // var regex = new RegExp("cat", "gi");
		var regex=/cat/gi;
	    var arr;
	    while ((arr = regex.exec(str)) != null) {
			//arr.index表示数组中出现匹配元素的下标位置
	    document.write("在索引" + arr.index + "的位置上出现了");
			//arr表示数组中出现的匹配元素
	    document.write(arr+"<br/>");
	
	        }
	</script>
</html>

表达式模式

特殊字符

字符	描述
$	匹配输入字符串的结尾位置
( )	标记子表达式的开始和结束位置，可以获取子表达式供以后使用
*	零次或多次匹配前面的子表达式
+	一次或多次匹配前面的子表达式
.	匹配除换行符 \n之外的任何单字符
?	零次或一次匹配前面的子表达式
\	转义字符标记
^	匹配输入字符串的开始位置
\|	指明两项之间的一个选择

限定符

字符	描述
*	零次或多次匹配前面的子表达式
+	至少匹配一次前面的子表达式
?	零次或一次匹配前面的子表达式
{n}	n 是一个非负整数，匹配确定的 n 次
{n,m}	m 和 n 均为非负整数，表示最多和最少匹配次数，其中n <= m

定位符

字符	描述
^	匹配输入字符串的开始位置。如果设置了 RegExp 对象的 Multiline 属性，^ 也匹配 '\n' 或 '\r' 之后的位置
$	匹配输入字符串的结束位置。如果设置了RegExp 对象的 Multiline 属性，$ 也匹配 '\n' 或 '\r' 之前的位置
\b	匹配一个单词边界，也就是指单词和空格间的位置
\B	匹配非单词边界

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			var sex = "男";
            //var  sex= "男";
			var regex = new RegExp("^男$|^女$");
			if (!regex.test(sex)) {
				alert("性别有误");//性别只能是男或女
			}
		</script>

	</body>
</html>

String对象与RegExp对象

String的方法：查找和替换

名称	描述
match	使用正则表达式模式查找字符串，并返回包含查找结果的数组
search	返回与正则表达式查找内容匹配的第一个子字符串的位置
replace	返回根据正则表达式进行文字替换后的字符串

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			var content = "THis is this cat";
			var regex = /th\w{2}/gi;
			var arr;
			//match是获得包含指定字符的字符串数组
			//arr = content.match(regex);
			//search是查找第一次出现处的索引
			//arr = content.search(regex);
			arr = content.replace(regex, "these");
			// replace是替换符合描述的字符串
			document.write(arr);
		</script>
	</body>
</html>

常用正则表达式

需求	表达式
匹配身份证号码	\d{15}\|\d{18}
验证电子邮件格式	^\w+((-\w+)\|(\.\w+))\@[A-Za-z0-9]+((\.\|-)[A-Za-z0-9]+)\.[A-Za-z0-9]+$
验证月份	0[1-9]\|[1][0-2]
验证一个月的天数	0[1-9]\|[12][0-9]\|3[01]
验证合法的标识名	^[a-zA-Z]\w{4,15}$
匹配中文字符	[\u4e00-\u9fa5]