一:转义符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<!--
1:转义字符 "\" 反斜杠会把自己后面跟的字符转义成文本
2:多行字符串
3:字符串换行符\n
4:缩进4个空格 \t
-->
<body>
<script>
var str="abcd\"edf";
console.log(str);
var str1="abcd\\edf";
console.log(str1);
var str2="abcd\nedf";//换行
console.log(str2);
var str3="abcd\tedf";
console.log(str3);
</script>
</body>
</html>
系统规定字符串不能多行显示:
这样写直接报错
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
document.body.innerHTML="
<div></div>
<span>123</span>";
</script>
</body>
</html>
正确写法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
document.body.innerHTML="<div></div><span>123</span>";
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
//方法一:
//每行结束加个转义字符,会将后面文本形式的回车转义掉,不再是回车
document.body.innerHTML="\
<div></div>\
<span>123</span>\
";
//方法二:字符串连接,比较low
document.body.innerHTML=
" <div></div>"+
"<span>123</span>";
</script>
</body>
</html>
二:正则表达式 RegExp
1:正则表达式的作用:匹配特殊字符或有特殊搭配原则的字符的最佳选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 检验是否符合规则 -->
email:<input type="text" value="">
<script>
</script>
</body>
</html>
三:RegExp两种创建方式
1:直接量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
//正则表达式创建方式
var reg=/abc/; //代表匹配字符串的规则是abc,测验表达式是否有自己规定的片段,这个字符串必须有abc,且是小写,并且要挨着
var str="abcd";
var str1="abec";
//正则表达式的属性 属性可单独 也可以写在一起,例如:var reg=/abcd/im;
var reg=/abcd/i;//ignoreCase忽视大小写
var str2="ABCd";//成立
</script>
</body>
</html>
2:new RegExp();
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
//括号里第一参数里写规则 第二个参数写属性
var str="abcd";
var reg=new RegExp("abcd","i");
</script>
</body>
</html>
推荐使用直接量
正则表达式的属性:
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
//三个属性 i忽视大小写 g全局匹配 m执行多行匹配
//g全局匹配实例 查找所有匹配,而非在找到第一个匹配后结束
//str.match方法是截取匹配合适的字符串片段
var reg = /ab/g;
var str = "abababababab";
//^第一个 即使有全局匹配,但是^代表匹配第一个
var reg=/^a/g;
var str1="abcdea";
var str2="abcde\na";//加换行符也还是只要一个a
//m多行匹配 换行匹配 上述例子加上多行匹配之后,就是两个a了
var reg = /^a/gm;
var str3 = "abcde\na";
</script>
</body>
</html>
reg.test();只判断是否匹配
str.match();把匹配的选出来
四:表达式
如何实现前面三位是数字,但不是固定的数字,是数字就行
一个[]代表一位 里面填的就是取值区间
例一:
var reg=/[1234567890][1234567890][1234567890]/;
var str="1230u98723zpoicuyoiodfjh"
例二:
var reg=/[ab][cd][d]/;
var str1="abcd";
例三:
//简便写法
var reg=/[0-9A-z]/;//从0-9,A-Z和a-z A的ASCII码是65 按照ASCII码排的
非,或用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
//^有两种用法
//放在表达式里面代表非
var reg=/[^a][^b]/g;//第一位不是a 第二位不是b
var str="ab1cd";
//或 要拿小括号写
var reg=/(abc|bcd)[0-9]/g;
</script>
</body>
</html>
五:元字符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// world \w===[0-9A-z_] 完全等于0-9 A-Z a-z 下划线
// \W===非w
var reg = /\wcd2/g;
var str = "b*cd2";
// \d===[0-9]
// \D===非d
var reg = /\d\d\d/;
var str = "123";
//表达式里也可以写元字符
var reg = /[\w\d]/;
// \s 空白字符 例如:空格,制表符,回车等等
// \S 非s
// \b===单词边界
// \B===非单词边界
var str="abc ced fgh";//比如ac cd fh这六个就是单词边界
var reg=/\bcde/g;//c是单词边界
var reg=/\bcde\B/g;
var str="abc cdesfgh";
//unicode编码 可以匹配汉字 汉字转换成unicode编码
var reg=/\u006a\u0073\u771f\u96be/;
var str="js真难";
//汉字也可以有范围 unicode编码也可以写区间
var reg=/[\u3000-\ua000]/;
var str="js真难";
// .===匹配一切
//以...结尾
var reg=/ed$/g;//连着e,以d结尾
var str="abcded";
//检验一个字符串首尾是否含有数字(首或尾)
var reg=/^\d|\d$/;//首或尾
var str="123";
//检验首和尾是否都含有数字
var reg=/^\d[\s\S]*\d$/g;//[\s\S]*区间拉伸,区间含有的0-多个
var str="123abc123";
</script>
</body>
</html>
六:量词
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
//n+ n可以出现1-无数次
//n* n 可以出现0-无数次
var reg=/\d*/g;//可以出现0-无数次
var str="abc";
var str1=str.match(reg);console.log(str1);//Array(4) [ "", "", "", "" ],因为都识别为空,所以就匹配到光标移动位,都是空
var reg=/\w+/g;
var str="aaaaaaaa";//结果没有空,因为有匹配结果,正则表达式遵循贪婪匹配原则,能多则不少
//n? 0-1
var reg=/\w?/g;
var str="aaaaaaaa";
//n{X} {x}个
var reg=/\w{3}/g;//每三个匹配
var str="aaaaaaa";
//n{x,y} {x,y}
var reg=/\w{3,5}/g;
var str="aaaaaaaaaaaaaaaaa";
//n{x,正无穷}
var reg=/\w{2,}/g;
var str="aaaaa";
</script>
</body>
</html>
七:RegExp对象方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// exec reg.exec();
var reg=/ab/g;//加了g会一直匹配下去
var str="abababab";
console.log(reg.exec(str));//index代表匹配的位置 游标位置
console.log(reg.lastIndex);//游标位置通过找游标位置来进行匹配
console.log(reg.exec(str));
console.log(reg.exec(str));
//匹配4个连续一样的
var str="aaaabbbb";
var reg=/(\w)\1\1\1/g;//括号也是子表达式,括号会记住里面匹配的内容 \1是引用第一个子表达式匹配的内容
//匹配aabb的形式
var str="aabb";
var reg=/(\w)\1(\w)\2/g;
</script>
</body>
</html>
八:支持正则表达式的String对象的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
//match匹配出符合正则表达式的字符
//search 返回匹配到的位置 匹配不到返回-1
var str = "edbaabb";
var reg = /(\w)\1(\w)\2/g;
console.log(str.search(reg));
//replace 替换
var str = "aa";
console.log(str.replace("a", "b")) //ba,只换了第一个,用正则表达式并写上g就能全部替换
//把aabb的字符串都倒过来,变成bbaa
var reg = /(\w)\1(\w)\2/g;
var str = "aabb";
console.log(str.replace(reg, "$2$2$1$1")); //一个$代表一个子表达式
// var reg=/(\w)\1(\w)\2/g;
var str = "aabb";
console.log(str.replace(reg, function ($, $1,
$2) { //传参 第一个参数传的是正则表达式的结果,第二个参数是第一个子表达式匹配的内容,第三个参数是第二个子表达式匹配的内容,符号都可以,自己定
return $2 + $2 + $1 + $1 + $1 + "abc";
}));
//如何将the-first-name变成theFirstName
var reg=/-\w/g;//-f -g匹配到
var str="the-first-name";
console.log(str.replace(reg,function($,$1){//reg找了两次,function运行两次
return $1.toUpperCase();
}));
//正向预查,正向断言 匹配任何其后紧接指定字符串n的字符串
var str="abaaaaa";
var reg=/a(?=b)/g;//匹配后面跟着b的a
//非 匹配任何其后不紧接指定字符串n的字符串
var str="abaaaaa";
var reg=/a(?!b)/g;
//去重
var str="aaaaaaaaabbbbcccc";
var reg=/(\w)\1*/g;//1*后向引用1个或者多个
console.log(str.replace(reg,"$1"));
</script>
</body>
</html>
匹配符号:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
var str="aa?aaaa";
var reg=/\?/g;
var str="aa//aaaa";
var reg=/\//g;
</script>
</body>
</html>