跨节点边界时如何用多个元素包装getSelection（）[重复]答案

【问题标题】：How to wrap getSelection() with multiple elements when it crosses node boundaries [duplicate]跨节点边界时如何用多个元素包装getSelection（）[重复]
【发布时间】：2019-11-23 01:26:06
【问题描述】：

这是我用元素包装所选文本的方法：

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</b> sit</a>
    amet
</div>

它会像这样创建两个包裹：

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

你知道我是怎么做到的吗？

【问题讨论】：

标签： javascript dom selection

【解决方案1】：

感谢Rangy 库，它非常简单，它包含一个“createClassApplier”模块，如果需要，它可以用多个包装来包装任何跨界选择。

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

npm install rangy

代码示例：

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

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

你可以在第二个参数中指定很多选项（改变默认span标签，添加属性等等），你可以查看every options here。

【讨论】：