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>
你知道我怎么能做到吗?
您可以通过以下方式获得它:
npm install rangy
代码示例:
import rangy from 'rangy/lib/rangy-classapplier'; rangy.init(); let rangyOptions = {}; let rangyWrapper = rangy.createClassApplier("your-class", rangyOptions); rangyWrapper.applyToSelection();
您可以在第二个参数中指定许多选项(更改默认范围标签,添加属性等...,您可以选中every options here。