将regex添加到vue.js数据对象

正则表达式模式

您提到的regex模式将匹配url的最后一个路径段(即文本 之后 最后一道斜杠)( demo 1 ,但代码注释指示您希望它匹配所有内容 之前 最后一个斜杠,需要如下模式( demo 2 )以下内容:

^(.+)\/.*$

regex模式分解说明:

^    # 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

通知 capture group #1包含所需的url部分,可以按如下方式提取:

const url = 'https://google.com/foo/bar';
const regex = /^(.+)\/.*$/ig;
const matches = regex.exec(url);
console.log(matches[1]) /* 1 = group index */

计算属性

你可以用一个 computed property 包含有效的 URL 基于中的字符串 this.myimage 是的。在下面的示例中, imgUrl 计算属性分析 这个.myimage 以确保它是有效的 统一资源定位地址 ,并使用正则表达式解析最后一个斜杠前的文本,然后将其作为前缀 /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 如果 这个.myimage 是无效的URL。这意味着 this.imgUrl 会是 未定义 如果文本输入包含 xyz ,但它会 http://google.com/a/b 如果输入有 http://google.com/a/b/c 是的。考虑到这一点,我们替换 v-show 变量 伊姆古尔 以便 <img> 仅在以下情况下显示 伊姆古尔 定义且不为空(即,当 这个.myimage 是有效的URL字符串)。我们还替换了 v-bind:src 具有 伊姆古尔 ,因为它已经包含了 /主页.jpg 附加:

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

updated jsFiddle