1 正则表达式1:
// - 用户名、密码、电子邮件...
- 正则表达式用来描述一个关于字符串的规则
程序可以根据这个规则来识别一个字符串是否符合要求
或者从一个字符串中提取出符合要求的内容
// 创建一个正则表达式
// 通过构造函数来创建一个正则的对象
// 语法: new RegExp('正则表达式','匹配模式');
// 使用typeof检查一个正则对象时,会返回 "object"
var reg = new RegExp('a');
// 正则表达式 a,用来检查一个字符串中是否含有a
// test() 用来检查一个字符串是否符合正则表达式的要求
// 如果符合,返回true, 如果不符合返回false
var result = reg.test('a'); // true
result = reg.test('abc'); // true
result = reg.test('bcabc'); // true
result = reg.test('bcd'); // false
reg = new RegExp('ab');
result = reg.test('abcd');
console.log(result);
2 正则表达式2:
// (字面量)创建一个正则表达式,来检查一个字符串是否是abc
var reg = /abc/;
var result = reg.test('abc');
// 创建一个正则,检查一个字符串是否是以a开头
/*
^ 表示字符串的开始位置
$ 表示字符串的结束位置
*/
reg = /^a/; // 匹配以a开头的字符串
reg = /c$/; // 匹配以c结尾的字符串
// result = reg.test('vabcv');
// 如果一个正则表达式以^ 开始,以$ 结束,则要求字符串要和正则表达式完全匹配
reg = /^a$/;// 匹配只有一个a的字符串
result = reg.test('aa');
// 创建一个正则表达式,来检查一个字符串是否是abc
reg = /^abc$/;
result = reg.test('abc'); //true
result = reg.test('bbabc'); //false
result = reg.test('abcee'); //false
// [] 表示的一个字符
reg = /^a[be]c$/; //abc aec
result = reg.test('abc');//true
result = reg.test('aec');//true
result = reg.test('abec');//false
result = reg.test('ac');//false
reg = /^abc|aec$/; // 以abc开头或者以aec结尾
result = reg.test('abc');// true
result = reg.test('abcasdasdasdsd');// true
result = reg.test('asdasdasdaec');// true
reg = /^abc$|^aec$/;//字符串是abc或这是aec
result = reg.test('abcd');//false
result = reg.test('aec');//true
result = reg.test('baec');//false
console.log(result);
3正则表达式3量词:
//创建一个正则来检查一个字符串是否是bbb
var reg = /^bbb$/;
var result = reg.test('bbb'); //true
result = reg.test('b'); //false
result = reg.test('bb'); //false
result = reg.test('bbbb'); //false
/*
量词
- 量词用来指定字符出现的次数
{n} 字符正好出现n次
{n,} 表示n次以上(大于等于n)
{n,m} 表示n-m次
+ 表示1次以上,相当于{1,}
* 表示0次或多次
? 表示0次或1次
量词只对它的前一位字符起作用
*/
reg = /^b{2}$/;
result = reg.test('bb'); // true
reg = /^b{2,}$/;
result = reg.test('bbb'); // true
reg = /^b{2,4}$/;
result = reg.test('bb');// true
result = reg.test('bbb');// true
result = reg.test('bbbb');// true
result = reg.test('bbbbb');// false
reg = /^ab+$/
result = reg.test('abbb'); // true
reg = /^ab*$/
result = reg.test('a'); //true
reg = /^ab?$/
result = reg.test('a');// true
result = reg.test('ab');// true
result = reg.test('abb');// false
reg = /^a[bcdefg]+$/;
result = reg.test('abcdefg'); //true
result = reg.test('ab'); //true
result = reg.test('ac'); //true
result = reg.test('afg'); //true
// 检查一个字符串是否出现了1次以上的ab
// 正则表达式中,可以使用()来为字符分组
reg = /^(ab)+$/;
result = reg.test('ababab'); //true
result = reg.test('abb'); //false
reg = /^a(b|e)c$/; // 等价于 /^a[be]c$/
result = reg.test('abc');//true
result = reg.test('aec');//true
result = reg.test('xxxaec');//false
result = reg.test('abec');//false
console.log(result);
4正则练习手机号:
创建一个正则表达式,可以用来检查一个字符串是否是一个手机号
1 3 843436188
1开头 第二位3-9任意数字 任意数字9位结尾
^1 [3-9] [0-9]{9}$
// ^1[3-9][0-9]{9}$
var phoneReg = /^1[3-9][0-9]{9}$/;
console.log(phoneReg.test('13843436188'));
console.log(phoneReg.test('1384343618'));
console.log(phoneReg.test('1184343618'));
console.log(phoneReg.test('1184343618889'));
console.log(phoneReg.test('23843436188'));
5正则和字符串相关方法:
search()
-
用来搜索一个字符串中是否含有指定内容
-
如果找到了会返回内容第一次出现的索引,如果没有找到则返回-1
-
可以接受一个正则表达式作为参数,这样将会根据正则表达式去搜索内容
split()
-
用来将一个字符串拆分一个数组
-
可以根据一个正则表达式来拆分字符串
replace()
-
使用一个新内容,替换字符串中的已有内容
-
参数:
第一个,被替换的内容
第二个,新的内容
match()
-
用来根据正则表单式将字符串中符合条件的内容提取出来
-
如果匹配到了元素,它会返回一个数组,将结构存储在数组中
-
如果没有匹配到元素,它会返回一个null
-
默认指匹配第一个符合条件的元素
var str = 'hello';
var result = str.search('ll');
result = str.search('o');
result = str.search('a');
result = str.search('l');
result = str.search(/l/);
str = 'acc adc aec afc agc';
// 查询字符串是否含有abc 或 aec
// result = str.search(/a[be]c/);
str = '孙悟空abc猪八戒aec沙和尚';
result = str.split(/a[be]c/);
str = 'Hello How are you!';
result = str.replace(/How/, '哈哈');
// 替换默认情况下,只会替换第一个,如果需要替换所有的需要指定一个全局匹配模式g
// i 忽略大小写 g 全局匹配
str = 'abc adc aec afc agc Aec';
result = str.replace(/a[be]c/ig, '哈哈');
str = 'dasda13715433267fsgfdgafs13867545679dfasfsdfasf';
var phoneReg = /1[3-9][0-9]{9}/g;
result = str.match(phoneReg);
console.log(result);
6正则表达式 元字符:
//创建一个正则表达式,可以检查一个字符串中是否含有.
// . 可以用来匹配除了换行(\n)以外的任意字符
var reg = /./;
var result = reg.test('a');
// 可以在正则表达式中使用 \ 作为转义字符
reg = /\./;
result = reg.test('.');
/*
\w- 任意的单词字符,等价于 [A-Za-z0-9_]
\W- 除了单词字符,等价于 [^A-Za-z0-9_]
\d- 任意数字 [0-9]
\D- 除了数字 [^0-9]
\s- 空格
\S- 除了空格
\b- 单词边界
\B - 除了单词边界
*/
reg = /\w/;
reg = /\W/;
reg = /\d/;
reg = /\D/;
reg = /\s/;
reg = /\S/;
result = reg.test('b');
//创建一个正则表达式,检查一个字符串中是否含有child这个单词
reg = /\bchild\b/;
result = reg.test('abcchildren'); // false
result = reg.test('child'); // true
result = reg.test('hello child'); // true
console.log(result);
7 去除空格练习:
var str = 'hello hello how are you!';
var reg = /\bhow\b/;
reg = /\byou\b/;
// console.log(reg.test(str));
// 获取用户输入的一个用户名
var username = prompt('请输入一个用户名:');
console.log('--'+username+'--');
//通过正则表达式去除username的前后空格
//将username中的空格替换为空串
// username = username.replace(/\s/g,'');
username = username.replace(/^\s+|\s+$/g,'');
console.log('--'+username+'--');
8邮箱格式练习:
编写一个用来检查一个字符串是否是正确的邮箱地址的正则表达式
101010101
jinlian.pan @abc.com
abc .xxx @ hello .com .cn
任意的字母数字下划线一位以上 .任意字母数字下划线一位以上
\w+ (\.\w+)*
@ 任意字母数字-一位以上 .字母2到5位 .字母2到5位
@ [a-z0-9-]+ (\.[a-z]{2,5}){1,2}
// 1
var emailReg = /^\w+(\.\w+)*@[a-z0-9-]+(\.[a-z]{2,5}){1,2}$/i;
console.log(emailReg.test('jinlian.pan@abc.com'));
// 2
var youx = prompt('邮箱地址')
var rea= /^\w+(\.\w+)*@([a-z0-9])+(\.[a-z]{2,5}){1,2}$/i
console.log(rea.test(youx))
9 正则补充方法和贪婪模式:
//创建一个正则表达式
// 正则表达式贪婪模式,通过量词去匹配内容,它会尽可能多的去匹配
// 可以通过在量词后边写?,来关闭贪婪模式
var reg = /ab+?/;
reg = /ab*?/;
reg = /ab??/;
// console.log(reg.test('abb'));
var str = 'abbbcc';
var result = str.match(reg);
// console.log(result[0]);
str = 'dasda13715433267fsgfdgafs13867545679dfasfsdfasf';
var phoneReg = /1[3-9][0-9]{9}/g;
// result = str.match(phoneReg);
/*
exec() 是正则表达式的方法,用来从字符串中匹配内容
作用和match类似,不同点在于它是正则的方法,match是字符串的方法
同时exec() 一次只会匹配一个结果,即使你设置全局匹配
*/
// phoneReg = /1[3-9]([0-9]{5})([0-9]{4})/g;
// result = phoneReg.exec(str);
// console.log(result[1]);
//练习: str = `<div>
<h2>HTML DOM 树</h2>
<img src="/i/ct_htmltree.gif" alt="HTML DOM Node Tree" />
</div>`;
// 编写正则表达式,提取出字符串中图片的路径
reg = /src="(.+?)"/;
result = reg.exec(str);
console.log(result[1]);
欢迎关注我的原创文章:小伙伴们!我是一名热衷于前端开发的作者,致力于分享我的知识和经验,帮助其他学习前端的小伙伴们。在我的文章中,你将会找到大量关于前端开发的精彩内容。
学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师,还是仅仅对前端开发感兴趣,我的文章将能为你提供宝贵的指导和知识。
在我的文章中,你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识,并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者,我的文章都能够满足你的学习需求。
此外,我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展,新的框架和工具层出不穷。通过我的文章,你将会了解到最新的前端技术趋势,并了解如何应对这些变化。
我深知学习前端不易,因此我将尽力以简洁明了的方式解释复杂的概念,并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发,并提升你的技能。
如果你想了解更多关于前端开发的内容,不妨关注我的原创文章。我会不定期更新,为你带来最新的前端技术和知识。感谢你的关注和支持,我们一起探讨交流技术共同进步,期待与你一同探索前端开发的奇妙世界!