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]);

Here is a working CodePen.

Answer 2

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

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

使用以下答案：Select text in javascript

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

2 个答案: