如何知道JavaScript范围对象是否在同一段落中？

我想限制用户在同一段落中进行文本选择

var selection = getSelection();
var range = selection.getRangeAt(0);

我想验证范围对象，这样，如果范围“存在”在同一段落下，而不是在可能的同级段落中结束，那么它将变为有效

var selection = getSelection();
var range = selection.getRangeAt(0);

怎么做

---

请参阅对象引用。

您可以使用Selection.toString（）并检查选择内容是否有新行字符

var range = window.getSelection().toString();
if(!/\n/.test(range)){
...

编辑

之所以有换行符，可能是因为实现了toString（）方法。您可以在Chromium源代码中看到此注释，例如：

//块流（相对于内联流）表示为具有
//元素前后的换行符

在这里：

---

这可能更像是一种惯例，而不是一种标准。因此，它可能不是最稳健的解决方案。但它很简单，可以很容易地验证，并且在大多数情况下应该具有相当标准的行为

您可以使用Selection.toString（）并检查选择内容是否有新行字符

var range = window.getSelection().toString();
if(!/\n/.test(range)){
...

编辑

之所以有换行符，可能是因为实现了toString（）方法。您可以在Chromium源代码中看到此注释，例如：

//块流（相对于内联流）表示为具有
//元素前后的换行符

在这里：

---

这可能更像是一种惯例，而不是一种标准。因此，它可能不是最稳健的解决方案。但它很简单，可以很容易地验证，并且在大多数情况下应该具有相当标准的行为

您可以使用

commonAncestorContainer

获取包含整个选择的最深元素，然后检查它是否包含在您的段落中：

段落.包含（范围.commonAncestorContainer）；

var p=document.querySelector（'p'），
log=document.querySelector（'div'）；
setInterval（函数（）{
var selection=getSelection（）；
if（selection.rangeCount）{
var range=selection.getRangeAt（0）；
log.textContent='第一个范围选择是'+（p.contains（range.commonAncestorContainer）'''NOT'+'包含在段落中'；
}否则{
log.textContent='无选择'；
}
}, 200);
p{border:1px solid；}
span{颜色：蓝色；}
b{颜色：石灰；}
i{color:red；}
选择一些文本：
Lorem ipsum dolor sit amet，是一位杰出的献身者。不要用钻石。他坐在阿梅特·伊普苏姆·莫里斯旁边。这是一个非常重要的问题。Donec et mollis dolor

您可以使用
commonAncestorContainer
获取包含整个选择的最深元素，然后检查它是否包含在您的段落中：

段落.包含（范围.commonAncestorContainer）；


var p=document.querySelector（'p'），
log=document.querySelector（'div'）；
setInterval（函数（）{
var selection=getSelection（）；
if（selection.rangeCount）{
var range=selection.getRangeAt（0）；
log.textContent='第一个范围选择是'+（p.contains（range.commonAncestorContainer）'''NOT'+'包含在段落中'；
}否则{
log.textContent='无选择'；
}
}, 200);
p{border:1px solid；}
span{颜色：蓝色；}
b{颜色：石灰；}
i{color:red；}
选择一些文本：
Lorem ipsum dolor sit amet，是一位杰出的献身者。不要用钻石。他坐在阿梅特·伊普苏姆·莫里斯旁边。这是一个非常重要的问题。Donec et mollis dolor

尝试使用
.startContainer
，
.endContainer
？尝试使用
.startContainer
，
.endContainer
？非常简单。。非常感谢。想详细说明一下新行字符来自哪里吗？@wilenx。它之所以有效，是因为默认情况下，
whitespace:normal
将换行符折叠为普通空格。但是如果段落包含换行符，并且有
空白：pre
，那么它就不起作用了。。非常感谢。想详细说明一下新行字符来自哪里吗？@wilenx。它之所以有效，是因为默认情况下，
whitespace:normal
将换行符折叠为普通空格。但是如果段落包含换行符，并且有
空白：pre
，则它将不起作用。