new Vue({ el: "#app", data: { url: "https://user:[email protected]:8080/first?a=1#hash", attr: [], }, computed: { output() { const prop = ["fullpath", "protocol", "username", "password", "host", "port", "pathname", "querystring", "fragment"].map(v => { return { key: v, value: '', } }); const regex = /^((\w+):)?\/\/((\w+)?(:(\w+))?@)?([^\/\?:]+)(:(\d+))?(\/?([^\/\?#][^\?#]*)?)?(\?([^#]+))?(#(\w*))?/g; const res = this.match(regex, this.url); if (res.length) { const position = [2, 4, 6, 7, 9, 11, 13]; const arr = []; for (let i = 0, len = position.length; i < len; i++) { arr.push(res[position[i]]); } return prop.map((v,i)=>{ v.value = arr[i]; return v; }) } return prop; } }, methods: { match(regex, str) { let matched = []; let m; while ((m = regex.exec(str)) !== null) { matched = matched.concat(m); } return matched; } }, mounted() {} })