[vue源码心得:2] 解析模板正则 : 解析标签属性

/^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/

这个正则有点长,
1 先说 \s*([^\s"'<>\/=]+),\s*的作用是先吃尽 所有空白符(空白、换行、tab等等),[^\s"'<>\/=]+ 取排除字符组之外的字符作为 “属性名”,这就是捕获 属性名 的过程

2  再说 (?:\s*(=)\s* , ?: 指的是非捕获组。这段意思是说 = 号前后可以有空格或其他空白字符。

3 第三段就比较有意思了,属性值支持三种格式 "xxx" ,'xxx' ,和xxx  

4 "([^"]*)" 是匹配 两个"之内任何不是"的字符,同理'([^']*)'也一样。不看正则源码,我还不知道可以支持 abc=def这种格式

5 从属性值的正则 "+ 的加号看来,可以匹配非对称数量的引号,"a"" 不知道有什么意义。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容