在一段字符串中的指定位置插入html標簽，實現內容修改留痕

客戶需求：實現內容修改留痕，並且鼠標移動到元素時，顯示修改人和修改時間。

（其實呢本人覺得這個如果是靜態的頁面，或者是后端拼接好的html，都很好實現，如果讓前端動態實現就......）

前端實現的方法或許有很多，我用了個比較笨的實現方式，結合后端返回的數據，實現如下：

               // 用json模擬后端返回的數據
                var itemList = {
                    word:"官方指南官方指南假設你已了解關於 HTML、CSS 和 JavaScript 的中級知識。如果你剛開始學習前端開發，將框架作為你的第一步可能不是最好的主意——掌握好基礎知識再來吧！之前有其它框架的使用經驗會有幫助，但這不是必需的。官方指南假設你已了解關於 HTML、CSS 和 JavaScript 的中級知識。如果你剛開始學習前端開發，將框架作為你的第一步可能不是最好的主意——掌握好基礎知識再來吧！之前有其它框架的使用經驗會有幫助，但這不是必需的。",
                    obj:[
                        {
                            s:4,
                            e:8,
                            u:'admin',
                            t:'2020-05-13',
                            type:'del',
                            text:'官方指南'
                        },
                        {
                            s:42,
                            e:87,
                            u:'admin2',
                            t:'2020-05-15',
                            type:'add',
                            text:'如果你剛開始學習前端開發，將框架作為你的第一步可能不是最好的主意——掌握好基礎知識再來吧！'
                        }
                    ]
                }
                
                
                var word = itemList.word;                                                                                        
                var strLength = 0;                
                itemList.obj.map(function(item,index){
                    //截取當前字符串的前后內容
                    var preWord = word.slice(0,item.s+strLength)
                    var nextWord = word.slice(item.e+strLength,word.length+strLength);
                    
                    //判斷字符串類型,添加相應標簽和class
                    if(item.type == 'del'){
                        word = preWord+"<del class='wordDel' u='"+item.u+"' t='"+item.t+"'>"+item.text+"</del>"+nextWord
                        strLength += 40 + item.u.length + item.t.length 
                    }else if(item.type == 'add'){
                        strLength += 40 + item.u.length + item.t.length
                        word = preWord+"<add class='wordAdd' u='"+item.u+"' t='"+item.t+"'>"+item.text+"</add>"+nextWord
                    }
                                                                                        
                                                                                    
                })
                
                
                $(".word").html(word)
                
                $(".wordDel").hover(function(){
                    //拿到當前標簽的自定義屬性
                    console.log($(this).attr("u"))
                    console.log($(this).attr("t"))
                },function(){
                    //鼠標移出時的操作
                })
                
                $(".wordAdd").hover(function(){
                    //拿到當前標簽的自定義屬性
                    console.log($(this).attr("u"))
                    console.log($(this).attr("t"))
                },function(){
                    //鼠標移出時的操作
                })

 

最終效果如下：