将正则表达式添加到 Vue.js 数据对象

Question

我需要操作一个 URL，以便它删除最后一个之后的所有内容/，然后将我自己的文件名附加到末尾。

在 final 之后删除所有内容的正则表达式/是[^\/]+$.

我尝试了以下 URL 中的代码，但挂载的功能似乎不起作用。不确定这是否是因为 Vue2，因为该帖子已有 18 个月的历史。

https://forum.vuejs.org/t/binding-a-regexp-object-to-an-html-attribute/815

    var vm = new Vue({
        el: '#vue-instance',
        data: {
            myimage: ''
        }
        });
        
    /* Regex to add is [^\/]+$ */

这是JSFiddle 中的代码。

如何合并正则表达式以将 url 转换为 HTML 中的输出？

Answer 1

正则表达式模式

您提到的正则表达式模式将匹配 URL 的最后一个路径段（即，最后一个斜杠之后的文本）（演示 1），但代码注释表明您希望它匹配最后一个斜杠之前的所有内容，这将需要一个模式如下（演示 2）：

^(.+)\/.*$

正则表达式模式的分解说明：

^    # assert position at start of line
(    # Start group 1
.+   # match any character (except line terminators), one or more times
)    # End group 1
\/   # match `/` literally
.*   # match any character (except line terminators), zero or more times
$    # assert position at end of line

注意捕获组#1 包含您想要的 URL 部分，您可以按如下方式提取它：

^(.+)\/.*$

计算属性

您可以使用一个计算属性，该属性将包含URL基于this.myimage. 在以下示例中，imgUrl计算属性进行解析this.myimage以确保它是有效的URL，并使用正则表达式解析最后一个斜杠之前的文本，然后将其作为前缀/home.jpg：

computed: {
  imgUrl() {
    let url = this.myimage;

    // validate URL in `this.myimage`
    try {
      url = new URL(url).toString();
    } catch (e) {
      url = '';
    }

    if (url) {
      const regex = /^(.+)\/.*$/ig;
      const matches = regex.exec(url);
      return matches && `${matches[1]}/home.jpg`;
    }
  }
}

请注意，undefined如果this.myimage是无效 URL，则计算属性返回。这意味着this.imgUrl将undefined如果文本输入载xyz，但它会是http://google.com/a/b如果输入了http://google.com/a/b/c。考虑到这一点，我们将v-show变量替换为，imgUrl以便<img>仅在imgUrl定义时显示并且不为空（即，whenthis.myimage是有效的 URL 字符串）。我们还替换了v-bind:srcwith的值imgUrl，因为它已经包含了完整的预期 URL 并/home.jpg附加了：

<img v-show="imgUrl" v-bind:src="imgUrl">

更新了 jsFiddle