將正則表達式添加到 Vue.js 數據對象

Question

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

在最后/之后刪除所有內容的正則表達式是[^\/]+$ 。

我嘗試了下面 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 的最后一個路徑段（即最后一個斜杠之后的文本）（ demo 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 部分，您可以按如下方式提取它：

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

計算屬性

您可以使用包含基於this.myimage中的字符串的有效URL的計算屬性。 在以下示例中， 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`;
    }
  }
}

請注意，如果this.myimage是無效 URL，則計算屬性返回undefined 。 這意味着如果文本輸入包含xyz ， this.imgUrl將是undefined的，但如果輸入包含http://google.com/a/b/c http://google.com/a/b 考慮到這一點，我們將v-show變量替換為imgUrl ，以便<img>僅在定義了 imgUrl 且不為空時this.myimage imgUrl有效的 URL 字符串時）。 我們還將v-bind:src的值替換為imgUrl ，因為它已經包含了完整的預期 URL，並附加了/home.jpg ：

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

更新了 jsFiddle