js全局正则匹配问题

Question

        var data = document.getElementById('data')
        let str = '丽yuan和yuAn'
        let reg = 'a'
        let rr = 'n'
        let result = str.replace(new RegExp(reg, 'gi'), `<span style="color: red;">${reg}</span>`)
        let r = result.replace(new RegExp(rr, 'gi'), `<span style="color: red;">${rr}</span>`)
        data.innerHTML = r

如何解决以下问题：

Answer 1

不能一次性替换吗。。

str.replace(/a|n/gi, (s)=>{
    // ..添加区分a和n的逻辑
    return `<span style="color: red;">${s}</span>`
})

Answer 2

result：
丽yu<span style="color: red;">a</span>n和yu<span style="color: red;">a</span>n

相当于把 '丽yuan和yuAn' 中的'a'和'A'都换了，结果没错呀。r在上面的基础上，又把n都换了。

这不是你的替换逻辑问题吗。