删除标记后，该标记后面的标记位置错乱

[xysaifeng]

请教下作者：比如我标记了1，2，3，4个标记，每次标记把序列化后的数据发送到后端，刷新页面从接口里获取标记列表循环后这4个标记会正常的显示。但是当我调用api删除标记2后，再次刷新页面，发现标记3、4位置就不对了。多次测试，发现只要删除前面的标记，刷新后，后面的标记的位置就错乱了。 后端返回的标记列表的数据和删除前是一致的，对此百思不得其解
删除前：

删除标记2后刷新页面,标记3的位置往后了：

请问下调用api删除标记后，还需要做其他操作吗？

[xysaifeng]

奇怪的是，标记1、2、3、4，当我删除最后一项时，再次刷新页面，不会影响前面的标记，标记1、2、3的位置是正确的。
还请大佬指点下，会是什么原因导致此现象的😭

[bryantchan]

奇怪的是，标记1、2、3、4，当我删除最后一项时，再次刷新页面，不会影响前面的标记，标记1、2、3的位置是正确的。
还请大佬指点下，会是什么原因导致此现象的😭

你能把你的逻辑代码发出来吗? 发个截图怎么讨论?

[xysaifeng]

奇怪的是，标记1、2、3、4，当我删除最后一项时，再次刷新页面，不会影响前面的标记，标记1、2、3的位置是正确的。
还请大佬指点下，会是什么原因导致此现象的😭

你能把你的逻辑代码发出来吗? 发个截图怎么讨论?

这个问题现在好了，先前一直困惑着，刚开始发现了问题，想着怎么去解决，却忘了去看你写好的demo。
在你的demo里，删除中间的某个标记，再次刷新，发现木有问题。那为啥我的删除后，后面的标记位置就会错乱呢？
项目框架是vue2，页面显示内容从接口里返回，因为demo里的内容是静态的，所以我在本地搭建了vue2的demo,里面写上静态内容用多个标签来包裹。发现标记后再删除中间某个标记，后面的标记位置还是错乱了，我开始寻找可能导致此结果的代码差异。最明显的是标记的缓存的时候我直接存在localStorage里，没用你写好的store，我看你的sotre里有判断，会不会是这个原因导致的呢？于是我拿来使用，刷新还是不行。此时我逐行查看代码差异，发现了我最没有想到的地方，在插件初始化的时候，demo里用了 wrapTag: 'i',我的没用，于是我加上，果不其然，删除后再次刷新没有位置错乱，我赶紧在项目里使用，也好了。然后我回到你的demo里把这个配置注释掉，删除标记再刷新页面，标记不会错乱，这又疑惑了😆

[KevinWang15]

可能是序列化方式的问题 web-highlighter序列化高亮是基于DOM路径的，当被标记网页发生变化时高亮的反序列化会错乱。另一种序列化方式是记录高亮文本和高亮文本前、后N个字符，这种序列化方式不依赖DOM路径，网页内容发生变化时可以正确反序列化。事实上我在做Chrome插件的时候也遇到了这个问题，然后调研了业界成熟的闭源Chrome插件如diigo、weava，发现他们用的都是后面一种方式。我后来自己做了一个后面一种方式的实现：notelix/web-marker

[Jseven86]

救命啊啊啊啊啊，我也是突然发现这个问题，排查了好久，最后也找不到为啥，真的是慌的一批，因为我这个功能很快要出的，一脸苦逼，吃饭都不香了，睡觉都睡不着，最后重新过来看看是不是插件问题，果然哈哈哈哈哈，嘻嘻嘻嘻嘻，把span改成 i, 果然没有问题，就是不知道为啥了嘻嘻嘻，今晚加鸡腿！！！！感谢作者和提出这个问题的小伙伴，太高兴了耶耶耶耶耶耶！！！

[wu0211]

大佬我现在项目跑不起来，你是怎么跑起来的
#108