跨节点边界时如何用多个元素包装getSelection（）

2024-06-01 • 问答

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

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>

你知道我怎么能做到吗？

liang88474754 回答：跨节点边界时如何用多个元素包装getSelection（）

得益于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。

dom javascript selection

本文链接：https://www.f2er.com/3114038.html

跨节点边界时如何用多个元素包装getSelection（）

liang88474754 回答：跨节点边界时如何用多个元素包装getSelection（）

大家都在问