根据字符串坐标,替换指定位置的字符串

要求,根据查询到的关键字列表,高亮文章中标题,简介,正文出现的所有关键字

数据个格式如下:

 const purTextDetalMsg = {
            title: {
                content: "就是男方快结束会计法拿到数据咖啡你的接口撒阿基诺的反馈加拿大萨九分裤安家费都是看副科级是",
                highlight: [
                    {
                        startPos: 15,
                        endPos: 16,
                        keyword: "咖啡",
                    },
                    {
                        startPos: 41,
                        endPos: 43,
                        keyword: "科级",
                    },
                ],
            },
            abstract: {
                content: "科技萨芬黄金三福晶科技安家沟敬爱的比较好办噶好几遍不会的",
                highlight: [
                    {
                        startPos: 4,
                        endPos: 6,
                        keyword: "黄金",
                    },
                    {
                        startPos: 15,
                        endPos: 17,
                        keyword: "爱的",
                    },
                    {
                        startPos: 17,
                        endPos: 19,
                        keyword: "比较",
                    },
                    {
                        startPos: 24,
                        endPos: 28,
                        keyword: "遍不会的",
                    },
                ],
            },
            text: {
                content: "会计师会计师",
                highlight: [
                    {
                        startPos: "",
                        endPos: "",
                        keyword: "",
                    },
                ],
            },
        };
     

代码格式,需要注意的一点就是关键字的循环的时候,需要倒叙循环

代码值中之只测试了,简介字段

   let purTitle = purTextDetalMsg.title.content;
        let purTitleKeyWords = purTextDetalMsg.title.highlight;
        let purAbstract = purTextDetalMsg.abstract.content;
        let purAbstractKeyWords = purTextDetalMsg.abstract.highlight;

        function heighLightKeyWords(originStr, keyWords) {
            let tempPurTitle = originStr;
            for (let i = keyWords.length - 1; i >= 0; i--) {
                const keyWord = keyWords[i];
                const startPos = keyWord.startPos;
                const endPos = keyWord.endPos;
                const keyW = keyWord.keyword;
                // 根据坐标位置,分隔已经只有的字符串
                const newStart = tempPurTitle.substring(0, startPos);
                const newEnd = tempPurTitle.substring(endPos);
                // 给关键字包裹span标签,并且添加类型
                tempPurTitle = `${newStart}<span class='height'>${keyW}</span>${newEnd}`;
            }
            return tempPurTitle;
        }

        const fomatStrTitle = heighLightKeyWords(purAbstract, purAbstractKeyWords);
        document.getElementById("app").innerHTML = fomatStrTitle;

效果如下