vue 正则批量匹配a标签的href和title

可以使用正则表达式和Vue的v-for指令来批量匹配a标签的href和title。

首先，需要在Vue的data中定义一个包含a标签的文本内容的字符串。假设这个字符串叫做`text`。

然后，在Vue的模板中使用正则表达式和v-for指令来批量匹配a标签的href和title。代码如下：

<template>
  <div>
    <a v-for="match in matches" :href="match[1]" :title="match[2]">{{ match[0] }}</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '<a href="https://www.google.com" title="Google">Google</a><a href="https://www.baidu.com" title="百度">百度</a><a href="https://www.github.com" title="GitHub">GitHub</a>'
    }
  },
  computed: {
    matches() {
      const regex = /<a\s+href="([^"]+)"\s+title="([^"]+)"[^>]*>(.*?)<\/a>/g;
      const matches = [];
      let match;
      while (match = regex.exec(this.text)) {
        matches.push(match.slice(1));
      }
      return matches;
    }
  }
}
</script>

这里使用了正则表达式`/<a\s+href="([^"]+)"\s+title="([^"]+)"[^>]*>(.*?)<\/a>/g`来匹配a标签的href和title。其中：

- `\s+`匹配一个或多个空格
- `[^"]+`匹配一个或多个非双引号字符
- `.*?`匹配任意字符（非贪婪模式）
- `g`表示全局匹配

在computed属性中，使用`String.prototype.exec()`方法来遍历所有匹配结果，并将href和title存入数组中返回。最后，在模板中使用v-for指令遍历数组，将匹配到的文本、href和title分别绑定到a标签的文本内容、href属性和title属性上即可。