我想根据用户的选择用我自己的 span 标签包围一堆 block 标签(p,div),我想知道该怎么做?我查看了 range.insertNode() 和 range.surroundNode() 函数,但没有办法将多个节点传递给环绕。
我目前的实现是这样的:
var selection = window.getSelection();
var range = selection.getRangeAt(0);
var $startSpan = $("<span class=\"SelectSpan\"/>");
range.insertNode($startSpan[0]);
range.surroundContents($startSpan[0]);
如果选择仅包含一个节点(即用户仅选择段落的一部分),则此方法有效,但如果用户的选择遍历多个 P 或 Div(我敢肯定,还有其他标签),则会中断。
例如,考虑以下 DOM 结构:
<div>
<p>Hello there Mary</p>
<p>Hello there Jake</p>
</div>
如果用户从两个段落中选择部分(假设用户选择“there Mary Hello there”),我希望得到类似以下内容的结果:
<div>
<p>Hello <span>there Mary</span></p>
<p><span>Hello there</span> Jake</p>
</div>
最佳答案
您需要找到选择范围内的所有文本节点,并分别包围每个节点。我写了一个库来做这个:Rangy ,特别是 CSS class applier module .
关于JavaScript - 如何用 span 标签包围 block 标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9451048/