如何替换vue.js中的元素？

Question

这是我的代码：

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}}

使用vue.js我如何替换 ^4re ^5fresh ^11 pug输出元素到

<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>

其中 ^4代表＆lt; span style =“ color：blue”＆gt; 等

最终结果应该是这样的： image

Answer 1

使用此正则判断将字符串分开： https://regex101.com/r/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}`);
    });
}

然后，我相信您可以处理剩余的任务。