vue中的正则问题?

  • Z时代
  • 2024-02-27
  • 分类：IT

Vue-2.6.14
在 html-parser.js 开头的正则表达式，用来匹配标签中的属性。有两个地方很困惑

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

（1）开头的 ([^\s"'<>\/=]+) 匹配属性名，可以看出属性名中的字符只要不是
空格 " ' < > / = 这几个字符就行。那么下边这些字符就能够使用吗？
! # % ^ & * ( )
没见过属性名有使用这些字符的，Vue官方文档里也没写，是因为html就允许在属性名使用这些字符？我试了下，在Vue中使用这些字符作为属性名会报错。这些字符应该也应该得限制作为属性名使用？

（2）后边用来匹配属性值的部分
"([^"]*)"+|'([^']*)'+|([^\s"'=<>]+)`

该段正则匹配3种情况，分别对应
1 class="....."
2 class='.....'
3 class=.....
比如第一种情况，匹配双引号的 "([^"]*)"+
后边的 " 有个 + 跟着，就是说可以有多个 "，这就允许如下这种写法
class="test"""
这种写法也从来没有见过，不知道是html就支持，还是Vue有什么特殊考虑？我是觉得不需要后边的 +

回答：

  1. 第一个问题：属性名中只能包含字母、数字以及少量特定字符，如下划线和连字符等。在 HTML 中，使用像 ! # % ^ & * ( ) 这样的字符作为属性名是被允许的，但不推荐这么做，因为这种写法可能导致代码可读性和可维护性降低。而在 Vue.js 中，由于采用了独立的模板语法，所以限制了属性名中可以使用的字符，只有字母和数字以及连字符和下划线，如果在Vue中使用非法的字符作为属性名，将会导致解析出错。
  2. 第二个问题，对于匹配属性值的部分，的确可以使带有重复双引号的字符串的情况。例如，class="test""" 就是合法的 HTML。但这种写法很少被使用，因为更常见的情况是使用单引号或者没有引号。至于为什么 + 号允许匹配多个双引号，通常是为了兼容一些非标准形式的 HTML 写法。
    这个正则表达式只是为了从 HTML 中匹配出属性和属性值，并兼容常见的非标准写法而已

以上是 vue中的正则问题? 的全部内容， 来源链接： utcz.com/p/934101.html

回到顶部