正则-如何提取出img标签中的图片路径

关于正则表达式

低级版

let reg = /src=\S*(?=\s)/;
let str = `<img class="img" src="/img/1.png" title="img"></img>`;
let src = str.match(reg)[0].split(/"|\'/)[1];
console.log(src)
//输出 /img/1.png

高级版

let str = `<img class="img" src="/img/1.png" title="img"></img>`;
let reg = /src="(.*?)"/;
let src = str.match(reg)[1];   //str.match(reg)[0] == src="/img/1.png"
console.log(src);
//输出  /img/1.png

笔记：惰性匹配与贪婪匹配

• (.*?) 惰性匹配
  “(.*?)” 匹配src="开始 且遇到的第一个"结束，如上

• (.*) 贪婪匹配
  “(.*)” 匹配src="开始 且遇到的最后一个"结束
  例：

  let str = `<img class="img" src="/img/1.png" title="img"></img>`;
  let reg = /src="(.*)"/;
  let src = str.match(reg)[1];
  console.log(src);
  //输出 /img/1.png" title="img

以前的关于正则表达式的学习笔记

1.修饰词

【i】 忽略大小写
【g】 全局匹配
【m】 把\n识别为多行

2.括号

• [abc] 查找方括号之间的任何字符
• [^abc] 查找除方括号之间的任何字符
• [0-9] 查找任何0-9的数字
• [a-z] 查找任何a-z的字母
• [A-Z] 查找任何A-Z的字母

• [A-z] 查找任何大小写的字母

• (red|blue|p[a-z]p)

  • 1.查找任何指定选项。|表示或
  • 2.可以实现向后引用，使用场景:replace替换方法

3.元字符

• . 匹配任意一个字符，但不能匹配不存在，也不能匹配换行符【\n】,注:HTML里不认【\n】换行，表现为空格
• \w 匹配任意一个数字[0-9]、字母[A-z]、下划线【_】
• \W 匹配除数字，字母、下划线以外的任一字符
• \d 匹配任一数字
• \D 匹配任一非数字
• \s 匹配任一空格 /p\Sp/
• \S 匹配任一非空格
• \b 匹配单词边界
• \B 匹配非单词边界
• \n 匹配换行符
• \f 匹配换页符
• \r 匹配回车符

4.量词(修饰前面的元字符n，放在元字符的后面)

• n+ 匹配任何包含至少一个n的字符串
• n 匹配任何包含0个或多个n的字符串。例【.】匹配任意多个字符
• n? 匹配任何包含零个或一个n的字符串。例【/p.?p/】匹配出pp php等等 【.*?】精确匹配任意多个字符
• n{X} 匹配包含X个n的字符串
• n{X,Y} 匹配包含X到Y个n的字符串
• n{X,} 匹配包含至少X个n的字符串
• n$ 匹配任何以n结尾的字符串，代表行末
• ^n 匹配任何以n开头的字符串，代表行首
• ?=n 匹配任何其后紧接字符串n的字符串
• ?!n 匹配任何其后没有紧接n的字符串

5.js中使用正则的字符串对象的方法

• search();
• match();
• replace();
• slipt();

6.实例

1）匹配以139开头的电话号码
【/^139\d{9}$/i】

2）匹配邮箱格式
【/^\w{1,30}@\w{1,10}.com$/i】
【/^\w+@\w+.w+$/】

3）替换字符
将date= ‘2016/05/11’替换成’2016-05-11’
date.replace(/^\/$/gi,”-“);

4）取中间任意字符