Javascript 如何检查所选文本是否溢出到特定类中

上下文：

我试图找出一种方法来判断某个用户高亮显示的文本部分是否包含类，如果包含类，则禁止用户高亮显示该文本块

在我的网站上，用户可以创建自己的文章。在这些文章中，用户可以突出显示文本并对其进行评论。以本文为例：

洛雷姆·伊普苏姆（Lorem ipsum Door sit amet Concertetur Adipise Elite sed do eiusmod）

如果这是一篇用户文章，我可以进入并突出显示文本“Lorem ipsum”，如下所示：

“Lorem ipsumdolor sit amet CONSECTETTUR ADIPSUM sed do 埃乌斯莫德。”

这将围绕高亮显示的文本创建一个类，其背景色设置为灰色

在这一点上，我想禁止用户突出显示任何已经突出显示的文本（“Lorem ipsum”），因为我在正确突出显示多个突出显示部分的单词时遇到问题

因此，我需要一个系统，当用户突出显示包含类中已包含的文本的任何部分时，例如：

“Loremipsum dolor坐在一位杰出的领导者身边 eiusmod“

加亮显示“ipsum dolor”，包括“ipsum”，它已经加亮显示并且已经有了一个类名

然后会弹出一个警报，但不会突出显示

到目前为止我所尝试的：

我已经尝试使用设置css属性

user select:none


这不允许用户直接突出显示包含此类的文本
尽管用户仍然可以在不同的点启动光标，并使用此属性将其插入文本中，从而使高亮显示成为可能



问题和示例JSFiddle:

如何判断高亮显示的文本是否包含某个类的文本

下面是一个示例，说明了当用户突出显示另一个类中包含的文本时我希望发生的情况：


$（“div”）。单击（函数（）{
checkIfTextisAlreadyHighlighted（）；
});
函数checkIfTextisAlreadyHighlighted（）{
var sel=window.getSelection（）；
如果（sel）{
警报（“此文本包含类*此处的类名*，无法突出显示”）；
}
}
。突出显示{
背景颜色：浅灰色；
}

如果突出显示已包含类的文本，则选择此文本应使此消息显示。更多随机文本。
关于以下实现的一些说明：

提取所选内容并获取范围
一旦你有了范围-检查开始和结束是否是同一个节点（如果是-我们将不会得到容器元素，因此没有我们可以再次检查的类名-我们需要检查父节点是否有相关的类）
如果我们的选择中有多个元素，那么我们可以检查克隆的元素是否具有我们想要的类（使用querySelector）
（这不是问题的一部分）-如果需要，也可以删除所选内容
以下是一个工作示例：


$（“div”）.mouseup（函数（）{
checkIfTextisAlreadyHighlighted（）；
});
函数resetSelection（）{
getSelection（）.removeAllRanges（）；
}
函数checkIfTextisAlreadyHighlighted（）{
const classToSearch='突出显示'；
const sel=window.getSelection（）；
常数范围=选择范围（0）；
if（range.startContainer===range.endContainer&&range.startContainer.parentElement.classList.contains（classToSearch））{
警报（`此文本包含类${classToSearch}，无法突出显示。`）；
重置选择（）；
}否则{
if（range.cloneContents（）.querySelector（`.${classToSearch}`）！==null）{
警报（`此文本包含类${classToSearch}，无法突出显示。`）；
重置选择（）；
}
}
}
。突出显示{
背景颜色：浅灰色；
}

如果突出显示已包含类的文本，则选择此文本应使此消息显示。
更多随机文本。
如果突出显示已包含类的文本，则选择此文本应使此消息显示。
更多随机文本。
如果您只是想避免用户选择您可以添加的特定突出显示的文本
用户选择：无；
给它的班级


。突出显示{
背景颜色：灰色；
用户选择：无；
-webkit用户选择：无；
-ms用户选择：无；
-moz用户选择：无；
}
Lorem ipsum Door sit amet Concertetur Adipise Elite sed do eiusmod.
我知道我没有回答这个问题，但在开始另一个突出显示之前，你能清除上一个突出显示吗？因此，在任何时候都不会有超过1个突出显示。我认为这在用户体验中很常见，我们不需要教育用户。@Mr.Brickowski清除突出显示是什么意思？按照您的方法，当用户选择文本时，您将使用css类对所选文本进行注释，对吗？“清除突出显示”意味着，当用户开始另一个文本选择时，从上一个选择中删除类，然后对当前选定的文本进行注释。这样，一次最多只能有一个高亮显示。这对你有用吗？@Brickowski先生我明白你的意思。问题是，我不想让用户能够突出显示已经突出显示的文本的任何部分。问题不是用户不能突出显示已突出显示的部分内容，而是我不知道如何禁止用户突出显示已突出显示的文本。因此，如果用户突出显示已突出显示的部分文本，则应提醒用户无法突出显示。这有意义吗？你能澄清一下吗