\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|...">
美文网首页
[vue源码心得:2] 解析模板正则 : 解析标签属性

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

作者: 代码柳书 | 来源:发表于2019-12-18 10:34 被阅读0次

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

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

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

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

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

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

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/uqbynctx.html