How can I replace element in 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/[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

ansidev · Accepted Answer · 2022-05-20 06:09:55Z

2

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.

edited May 20, 2022 at 6:09

answered May 20, 2022 at 1:38

ansidev

3711 gold badge3 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I replace element in vue.js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related