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] |