老师,有几点疑惑

老师,有几点疑惑

var str = '<p><a>这是一段文字</a></p>';

var pattern = /<[a-zA-Z]+>(.*)<\/[a-zA-Z]+>/;

console.log(pattern.exec(str));

问题1,首先中间括号不加问号,最前面不用括号括起来直接这样写也是能匹配到的阿?

问题2,为啥中间括号后面加?防止贪婪匹配吗?但是里面明明就是一个<a>内容</a>,没有第二个a标签,就不会贪婪匹配阿

问题3,把第一个<([a-zA-Z]+)>里面括起来,以便后面的标签和前面的里面相同?能给我举一个例子吗?前面的<字母>和后面的</字母>不同的例子?

问题4,为什么第一个不分组,中间括号加?号,var pattern = /<[a-zA-Z]+>(.*?)<\/[a-zA-Z]+>/;这么写,打印结果都是单标签,没有结束标签呢?打印结果如下

["<p><a>这是一段文字</a>", "<a>这是一段文字", index: 0, input: "<p><a>这是一段文字</a></p>", groups: undefined]

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,可以参考下方的注释再理解一下:

http://img1.sycdn.imooc.com//climg/5dd7ab4809f3e5a713510303.jpg

 如果这样写var pattern = /<([a-zA-Z]+)>(.*?)<\/\1>/,那么\1代表的是([a-zA-Z]+),也就是开始标签和闭合标签必须是相同的,所以可以匹配完整的内容。

同学可以再理解下

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

好帮手慕言 2019-11-22 15:23:52

同学你好,关于同学的疑问,解答如下:

1、针对你提供的这部分代码,理解的是正确的,确实是可以匹配到。

2、如果根据老师的例子,那么不加?也是可以的,但是按照老师的例子扩展一下,比如有两个p标签,加上?只会匹配第一个p标签里面的内容,可以参考下方的例子:

http://img1.sycdn.imooc.com//climg/5dd787880923810f08940128.jpg

控制台的打印结果:

http://img1.sycdn.imooc.com//climg/5dd7872f095fd9a012020139.jpg

如果不加?那么两个p标签都是可以匹配到的,控制台如下:

http://img1.sycdn.imooc.com//climg/5dd787d509736d8517400162.jpg

3、正常情况下,开始标签和闭合标签是一致的,比如p标签的闭合标签也是p,正确写法是<p></p>,

http://img1.sycdn.imooc.com//climg/5dd788d109f8bea105830122.jpg

控制台效果:

http://img1.sycdn.imooc.com//climg/5dd788ea098758c911070152.jpg

如果<p></div>这样写,不是一个完整的标签。一般情况下,我们匹配的是一对完整标签里面的内容,使用老师的这种方法会更严谨一些。

4、因为使用的是禁止贪婪匹配,所以当遇到第一个结束标签时,就会停止匹配,小括号里面匹配到的内容是不会包含结束标签。

http://img1.sycdn.imooc.com//climg/5dd78a950975981806730185.jpg

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

  • 提问者 慕盖茨9092533 #1
    老师,问题4还是不太理解,为什么那么写贪婪匹配会取消闭合标签,你说的小括号里面匹配到的内容是不会包含结束标签,为什么最外层p标签的闭合标签也会被取消?然后加上前面的组合,贪婪匹配就不会取消闭合标签了,比如这么写 var pattern = /<([a-zA-Z]+)>(.*?)<\/\1>/;
    2019-11-22 16:07:52
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
组件化思想开发电商网页 18版
  • 参与学习           人
  • 提交作业       467    份
  • 解答问题       4826    个

本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识,不仅如此,还会学习如何利用组件化的思想来开发网页,知识点+案例,使得所学可以更好的得到实践。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师