How can I replace element in vue.js? - vue.js

Question

Here's my code:
window.onload = (event) => {
new Vue({
el: "#test",
mounted: function() {
this.fetch();
setInterval(this.fetch, 60000);
},
data: function() {
return {
tracker: {
serverInfo: {
servername: ""
}
}
}
},
methods: {
fetch() {
fetch("https://pt.dogi.us/ParaTrackerDynamic.php?ip=pug.jactf.com&port=29071&skin=JSON")
.then(response => response.json())
.then(data => {this.tracker = data});
},
}
})
}
<script src="https://unpkg.com/vue#2.4.4/dist/vue.min.js"></script>
<div id="test">
<span style="font-weight:bold">SERVER NAME:</span> {{tracker.serverInfo.servername}}
Using vue.js how can I replace ^4Re^5fresh^11-PUG output element to
<span style="font-weight:bold">SERVER NAME:</span> <span style="color:blue">Re</span><span style="color:cyan">fresh</span><span style="color:red">1-PUG</span>
where ^4 stands for <span style="color:blue">
etc
Final result should looks like this: image

Answer 1

Use this regex to split the string: https://regex101.com/r/G2s23R/1
const regex = /(\^\d)([^\^]+)/gm;
// Alternative syntax using RegExp constructor
// const regex = new RegExp('(\\^\\d)([^\\^]+)', 'gm')
const str = `^4Re^5fresh^11-PUG`;
let m;
while ((m = regex.exec(str)) !== null) {
// This is necessary to avoid infinite loops with zero-width matches
if (m.index === regex.lastIndex) {
regex.lastIndex++;
}
// The result can be accessed through the `m`-variable.
m.forEach((match, groupIndex) => {
console.log(`Found match, group ${groupIndex}: ${match}`);
});
}
Then, I believe that you can process the remaining tasks.