javascript - 从特定标签中取消选择文本

Question

有没有办法从特定标签中取消选择文本。例如。

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

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

取消选择所有选定的文本

window.getSelection().removeAllRanges();

但是有没有办法取消选择具有特定 ID 的文本？

Answer 1

你可以用 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 树并根据您的条件检查每个元素，并获取它的文本并将其附加到您的选择中string，如何遍历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