怎么根据字符串纠错后的返回结果进行文本内容高亮显示/结果展示？

文本字符串：'芸南市气象台暴雨橙色色预警信号，目前降雨云团已东北移，对芸南市影响减弱，请主意防范降水过后可能引发的次生灾害'纠错识别后返回数据为：

{"leader":[],"org":[],word": [[37, "主意", "注意", "word"]], "char": [], "redund": [[9, "色", "", "redund"]], "miss": [[9, "色色", "色黄色", "miss"]], "addr": [[0, "芸南市", "丰南市", "addr_S"]], "name": []}

想根据返回内容进行文字高亮显示其中"word": [[37, "主意", "注意", "word"]],代表错别词纠错 意思分别为 [位置，原词，结果词，类型]

识别后在页面显示为<span style="color: #333;font-weight: 700;background-color: orange;">芸南市</span>气象台暴雨橙<span style="color: #333;font-weight: 700;background-color: orange;">色色</span>预警信号，目前降雨云团已东北移，对<span style="color: #333;font-weight: 700;background-color: orange;">芸南市</span>影响减弱，请<span style="color: #333;font-weight: 700;background-color: orange;">主意</span>防范降水过后可能引发的次生灾害并根据返回结果列表纠错识别结果 有纠错的排前面纠错返回意思如下：领导人职务纠错：组织机构纠错：别词纠错：1 别字纠错：语法纠错：2（redund-表示语法冗余 / miss表示语法缺失）地名纠错：1全文人名纠错：

效果如下：右侧识别后点击效果图如：目前的效果是我根据需要写死的左侧根据@shinak 的写完左侧内容 右侧的内容 我写了循环判断

            let ret = []
            for(let key in data) {  
                let obj = {}
                data[key].forEach((item,index) => {
                    let [pos , olw, resw, type] = item
                    if(type.indexOf('addr') !== -1){
                        obj.name = "地名纠错";obj.type = type; obj.pos = pos;obj.oldpos = olw;obj.corrpos = resw
                    }if(type == 'char'){
                         obj.name = "别字纠错";obj.type = type; obj.pos = pos;obj.oldpos = olw;obj.corrpos = resw
                    }if(type == 'leader'){
                         obj.name = "领导人纠错";obj.type = type; obj.pos = pos;obj.oldpos = olw;obj.corrpos = resw
                    }if(type == 'miss' || type == 'redund'){
                         obj.name = "语法纠错";obj.type = type; obj.pos = pos;obj.oldpos = olw;obj.corrpos = resw
                    }if(type == 'name'){
                         obj.name = "全文人名纠错";obj.type = type; obj.pos = pos;obj.oldpos = olw;obj.corrpos = resw
                    }if(type == 'org'){
                         obj.name = "机构名纠错";obj.type = type; obj.pos = pos;obj.oldpos = olw;obj.corrpos = resw
                    }if(type == 'word'){
                        obj.name = "别词纠错";obj.type = type; obj.pos = pos;obj.oldpos = olw;obj.corrpos = resw
                    }
                }) 
                ret.push(obj)
            }

返回值是：'{"black_list": [], "punc": [[122, "：?", "", "连续使用标点"]], "leader": [], "org": [], "pol": [], "grammar_pc": [], "order": [], "idm": [], "word": [], "char": [], "redund": [], "miss": [], "dapei": [], "number": [], "addr": [], "name": [], "yjdatetime": [[10,"202251201","2023年03月16日","发布时间与当前时间不一致"]], "yjaddr": [[-1,"","","未包含正确的行政区域名称。"]]}'

我用

[...errMap.entries()].forEach(([key, value]) => {
 content =content.replace(eval(`/${value[1]}/g`), `<span style="color: #333;font-weight: 700;background-color: orange;">${value[1]}</span>`);})

后高亮变成了