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

【问题标题】：How to select all text in <p> tag?如何选择 <p> 标签中的所有文本？
【发布时间】：2014-11-07 04:38:28
【问题描述】：

我想制作一个按钮，它将选择我 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);

【问题讨论】：

您应该发布到目前为止您尝试过的代码。

标签： javascript selection

【解决方案1】：

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

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

  range.selectNodeContents(txt[0]);

Here is a working CodePen.

【讨论】：

我可以用 div 改变 p。那么如何选择所有文本呢？
我不明白你的意思；您也不能将<p> 放在另一个<p> 中。在我更新的答案中检查链接的 CodePen。
感谢您的回答，有帮助）
Pointy，你能帮忙吗，有节点列表。我有很多元素 p，但只想选择一个 p 的文本。我该如何解决？
@Roman 好吧，首先你必须决定是什么让 <p> 变得有趣。

【解决方案2】：

您需要更好地构建您的 HTML，因为在 <div> 内嵌套 <p> 是无效的，但是：

http://jsfiddle.net/hge2Lp0p/1/

使用来自：Select text in javascript的答案

【讨论】：

感谢您的回答）