取消选择特定标记中的文本

deselect text from particular tag

本文关键字：文本 选择 取消      更新时间：2023-09-26

是否有方法从特定标记中取消选择文本。例如

<p id ="first">first text</p>
<p id ="second">Second text</p>

如果从两个标签中选择文本，但我想取消选择第一个id的标签。我知道你可以使用取消选择所有选择的文本

window.getSelection().removeAllRanges();

但是有没有一种方法可以取消选择具有特定id的文本？

你可以用CSS来实现这一点，你可以在下面指定CSS属性，以允许对特定元素进行选择。根据您的需求，您可以通过两种方式实现这一点。

1）CSS-在这种方法中，如果您提供任何具有以下CSS的元素，那么它将不会包含在选择中，并且当您使用以下代码进行选择时，它不会返回#first元素的文本

HTML代码：

var selObj = window.getSelection(); 
var selRange = selObj.getRangeAt(0);
selObj.toString();

CSS代码：

#first {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

2）Javascript-这是一种概念方法，你需要用正确的语法来尝试它，你可以编写一个函数，使用选择对象并遍历HTML树，检查每个元素的条件，获取它的文本并将其附加到你的选择字符串中，如何遍历DOM是你的选择

var selection = '';//your selection string
var selObj = window.getSelection(); 
var selRange = selObj.getRangeAt(0);
var nextElem;
// Get start of the 
selection += selObj.startContainer.getText().substr(selObj.startOffset);    
nextElem = selObj.startContainer;
while(true) {
  nextElem = nextElem.nextElem; // Get this somehow
  selection += nextElemr.getText();
  if(condition) {
     break;
  }
}

因此，基本上使用选择对象的四个变量就可以做到这一点，它们是startContainer、startOffset、endContainer、endOffset

相关文章：