javascript - 如何从任意 html 字符串中获取固定的 html

Question

概述

我试图突出显示 dom 范围，然后取消突出显示它。鉴于范围可以跨越多个元素，甚至是 block 元素，使用荧光笔类将范围包装在跨度中可能会破坏页面的外观。更糟糕的是，我还没有找到一种干净的方法来逆转该操作。 range.extractContents() 是我所知道的唯一可以修复 html 以确保标签正确关闭的方法，但它通过在我之后保留的“span”周围插入填充节点来更改文档。删除“跨度”。

我解决这个问题的想法是使用另一种方法。我可以用包含我的跨度的新 html 替换最常见祖先的 html。然后保存原来的html并恢复即可完成“取消突出显示”。我认为这将有助于解决可撤消性问题，但我不知道如何以与 range.extractContents() 修复它相同的方式修复 html。

是否有一种方法可以采用 html 并“修复它”，使其适合作为分配给 innerHtml 的右侧？

Answer 1

侵入性最小的方法是获取范围的文本节点，在每个范围上计算 .getBoxQuads()，然后使用 CSS filters 插入绝对定位的覆盖层。在这些坐标上。