javascript 将正则表达式添加到 Vue.js 数据对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50996407/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding Regex to a Vue.js Data Object
提问by Gracie
I need to manipulate a URL so that it removes everything after the last / and then I append my own filename to the end.
我需要操作一个 URL，以便它删除最后一个 / 之后的所有内容，然后将我自己的文件名附加到末尾。
The regex to remove everything after the final is [^\/]+$
在决赛之后删除所有内容的正则表达式是 [^\/]+$
I tried the code from the URL below but mounted function doesn't seem to work. Not sure if that is because of Vue2 or not, as the post is 18 months old.
我尝试了以下 URL 中的代码，但挂载的功能似乎不起作用。不确定这是否是因为 Vue2，因为该帖子已有 18 个月的历史。
https://forum.vuejs.org/t/binding-a-regexp-object-to-an-html-attribute/815
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 [^\/]+$ */
Here is the code in a JSFiddle
这是JSFiddle 中的代码
How can I incorporate the regex to convert the url to output in the HTML?
如何合并正则表达式以将 url 转换为 HTML 中的输出？
回答by tony19
Regex pattern
正则表达式模式
The regex pattern you mention would match the last path segment of the URL (i.e., the text afterthe last slash) (demo 1), but the code comment indicates you want it to match everything beforethe last slash, which would instead require a pattern like the following (demo 2):
您提到的正则表达式模式将匹配 URL 的最后一个路径段（即，最后一个斜杠之后的文本）（演示 1），但代码注释表明您希望它匹配最后一个斜杠之前的所有内容，这将需要一个模式如下（演示 2）：
^(.+)\/.*$
Explanation of regex pattern broken down:
正则表达式模式的分解说明：
^ # 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
Notice capture group#1 contains the URL parts you want, and you could extract it as follows:
注意捕获组#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
计算属性
You could use a computed propertythat would contain a valid URLbased on the string in this.myimage. In the following example, the imgUrlcomputed property parses this.myimageto ensure it's a valid URL, and uses a regular expression to parse the text before the last slash, which it then prefixes to /home.jpg:
您可以使用一个计算属性，该属性将包含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`;
}
}
}
Note the computed property returns undefinedif this.myimageis an invalid URL. This means this.imgUrlwould be undefinedif the text input contained xyz, but it would be http://google.com/a/bif the input had http://google.com/a/b/c. With that in mind, we replace the v-showvariable with imgUrlso that the <img>is only shown when imgUrlis defined and not empty (i.e., when this.myimageis a valid URL string). We also replace the value of v-bind:srcwith imgUrl, since it will already contain the full intended URL with /home.jpgappended:
请注意，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">
