CODEWITHSUNDEEP
vue.jsvuejs2
aphra
aphra

Reputation: 5

How can I replace element in vue.js?

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/[email protected]/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

Upvotes: 0

Views: 418

Answers (1)

ansidev
ansidev

Reputation: 371

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.

Upvotes: 2

Related Questions