Javascript 如何在getSelection（）跨越节点边界时使用多个元素包装它

下面是我用元素包装所选文本的步骤：

let selectObj = window.getSelection();
let wrapTag = document.createElement("a");

const range = selectObj.getRangeAt(0).cloneRange();
range.surroundContents(wrapTag);
selectObj.removeAllRanges();
selectObj.addRange(range);

但是，如果选择跨越文本节点边界，它将不起作用，因此我认为可以对每个跨越的节点进行另一次换行，而不是像这样失败（所选文本位于a标记内）：

洛勒姆
乱数假文
多洛坐
艾米特

它会创建两个类似以下的包裹：

<div>
    Lorem
    <b>ipsum <a>dolor</a></b>
    <a>sit</a>
    amet
</div>

洛勒姆
同侧阴沟
坐
艾米特

---

你知道我如何实现它吗？

多亏了这个库，它非常简单，它包含一个“createClassApplier”模块，如果需要，它可以用多个包装来包装任何跨境选择

您可以通过以下方式获得：

npm install rangy

代码示例：

import rangy from 'rangy/lib/rangy-classapplier';

rangy.init();
let rangyOptions = {};
let rangyWrapper = rangy.createClassApplier("your-class", rangyOptions);
rangyWrapper.applyToSelection();

您可以在第二个参数中指定许多选项（更改默认范围标记、添加属性等），您可以进行检查

import rangy from 'rangy/lib/rangy-classapplier';

rangy.init();
let rangyOptions = {};
let rangyWrapper = rangy.createClassApplier("your-class", rangyOptions);
rangyWrapper.applyToSelection();