如何选择 <p> 标签中的所有文本？

Question

我想制作按钮，它将选择我的 p 标签中的所有文本。标签示例：

<p class="foo">
some text
<div>this div is child of p</div>
<div>one more row</div>
</p>

解决方案也必须通过 window.getSelection() 或类似但不是 jQuery。我试图通过使用 selectNodeContents(el) 来做到这一点，但结果只是第一行。

任何人都可以帮助我，因为我无法弄清楚这一点。

编辑代码：

var selection = window.getSelection();
var txt = document.getElementsByClassName("foo");
var range = document.createRange();
range.selectNodeContents(txt);
selection.removeAllRanges();
selection.addRange(range);

Answer 1

我认为您的基本问题是<div>元素不能是<p>元素的子元素。您<p>在第一个的开头隐含地结束<div>。

如果您将<div>元素更改为，<span>则它们将位于<p>. 您必须解决的下一个问题是.getElementsByClassName()返回节点列表，而不是单个元素，因此代码必须考虑到这一点：

  range.selectNodeContents(txt[0]);

这是一个有效的 CodePen。