Question

我需要从选择中提取文本并将其发送到TTS服务。 TTS服务将返回流URL和每个单词的一组索引，指示它们的开始和结束位置（时间和文本）。

当用户播放流时，我想在读出每个单词时突出显示。要做到这一点，我不能只使用每个单词的文本索引，因为它们无法让我回到原始HTML节点 - 因此我不能使用严格文本的toString()。

到目前为止，我正在使用范围对象的开始和结束容器创建TreeWalker，并使用它来提取范围内的所有文本节点。

问题： window.getSelection().toString()固有地忽略未显示的节点。这包括<script>个节点，<style>节点，具有display: none;的节点等。使用TreeWalker不会。

我知道我可以手动跳过TreeWalker中的所有这些节点（如getSelection without alt attribute and scripts in it?中建议的那样），但它可能变得非常复杂（特别是检查每个节点的可见性）。

在进入此之前，我想问一下，自从我链接的问题得到解答以来，是否有任何可用的新方法或库？

我不打算将代码设置为跨浏览器，而是使用普通的Javascript（即没有jQuery）。

Answer 1

首先，我建议不要使用window.getSelection().toString()。它的行为因浏览器而异，有currently no spec for it。有一个HTML5规范的草案版本要求它应该返回在每个选择范围上调用toString()的结果的连接，这是IE 9实现的; WebKit和Mozilla都做了一些更复杂的事情。此外，WebKit和Mozilla之间存在差异，他们可以随时更改其实现。

冒着推广我自己的东西的风险，你可以使用我的TextRange module库的Rangy，它试图提供导航DOM的方法，并在其中作为用户文本的范围看到。另一种方法是自己做很多类似的工作，或限制代码可以使用的HTML。

Answer 2

在等待答案时，我开始编写自己的解析器。由于没有跨浏览器支持而且我没有对文本进行任何修改，这有点粗糙 - 这意味着HTML中的任何换行符和其他空格都将被保留。

还有很多我尚未清理的冗余，比如遍历我已经知道隐藏的节点的子节点。

无论如何，代码：

function ParsedRange(range){
  this.text = "";
  this.nodeIndices = [];

  this.highlight = function(startIndex, endIndex){
    var selection = window.getSelection();
    var startNode = this.nodeIndices[startIndex].node;
    var endNode = this.nodeIndices[endIndex].node;
    var startOffset = startIndex - this.nodeIndices[startIndex].startIndex;
    var endOffset = endIndex - this.nodeIndices[endIndex].startIndex + 1;

    // Scroll into view
    startNode.parentNode.scrollIntoViewIfNeeded();

    // Highlight
    range.setStart(startNode, startOffset);
    range.setEnd(endNode, endOffset);
    selection.removeAllRanges();
    selection.addRange(range);
  };

  // Parsing starts here
  var startIndex;
  var rootNode = range.commonAncestorContainer;
  var startNode = range.startContainer;
  var endNode = range.endContainer;
  var treeWalker = document.createTreeWalker(rootNode, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, null, false); // Only walk text and element nodes
  var currentNode = treeWalker.currentNode;

  // Move to start node
  while (currentNode && currentNode != startNode) currentNode = treeWalker.nextNode();

  // Extract text
  var nodeText;
  while (currentNode && currentNode != endNode){ // Handle end node separately
    // Continue to next node if current node is hidden
    if (isHidden(currentNode)){
      currentNode = treeWalker.nextNode();
      continue;
    }

    // Extract text if text node
    if (currentNode.nodeType == 3){
      if (currentNode == startNode) nodeText = currentNode.nodeValue.substring(range.startOffset); // Extract from start of selection if first node
      else nodeText = currentNode.nodeValue; // Else extra entire node

      this.text += nodeText;
      if (currentNode == startNode) startIndex = range.startOffset * -1;
      else startIndex = this.nodeIndices.length;
      for (var i=0; i<nodeText.length; i++){
        this.nodeIndices.push({
          startIndex: startIndex,
          node: currentNode
        });
      }
    }

    // Continue to next node
    currentNode = treeWalker.nextNode();
  }

  // Extract text from end node if it's a text node
  if (currentNode == endNode && currentNode.nodeType == 3 && !isHidden(currentNode)){
    if (endNode == startNode) nodeText = currentNode.nodeValue.substring(range.startOffset, range.endOffset); // Extract only selected part if end and start nodes are the same
    else nodeText = currentNode.nodeValue.substring(0, range.endOffset); // Else extract up to where the selection ends in the end node

    this.text += nodeText;
    if (currentNode == startNode) startIndex = range.startOffset*-1;
    else startIndex = this.nodeIndices.length;
    for (var i=0; i<nodeText.length; i++){
      this.nodeIndices.push({
        startIndex: startIndex,
        node: currentNode
      });
    }
  }

  return this;
}
ParsedRange.removeHighlight = function(){
  window.getSelection().removeAllRanges();
};

function isHidden(element){
  // Get parent node if element is a text node
  if (element.nodeType == 3) element = element.parentNode;

  // Only check visibility of the element itself
  if (window.getComputedStyle(element, null).getPropertyValue("visibility") == "hidden") return true;

  // Check display and dimensions for element and its parents
  while (element){
    if (element.nodeType == 9) return false; // Document
    if (element.tagName == "NOSCRIPT") return true;

    if (window.getComputedStyle(element, null).getPropertyValue("display") == "none") return true;
    if (element.offsetWidth == 0 || element.offsetHeight == 0){ // If element does not have overflow:visible it is hidden
      if (window.getComputedStyle(element, null).getPropertyValue("overflow") != "visible"){
        return true;
      }
    }
    element = element.parentNode;
  }
  return false;
}

由于它在我的项目中的集成方式，我已经把它作为一个类（除isHidden()辅助函数之外）。

除了类之外，它通过传递一个有效范围来工作，然后它将提取范围内的文本并保存对所有节点的引用。这些引用在highlight()函数中使用，该函数使用浏览器选择根据开始和结束字符索引进行突出显示。

关于nodeIndices属性的额外注释（看起来可能没有意义）。 nodeIndices是一个包含以下形式的对象的数组：

{
  startIndex: // Int
  node: // Reference to text node
}

对于我提取到我生成的文本中的每个单个字符，我在nodeIndices上推送其中一个对象，node属性只是对文本节点的引用。 startIndex定义节点在整个文本中的起始字符。

使用这个数组，我可以从ParsedParagraph.text中的字符索引转换为HTML节点，以及该节点内相应字符的索引。

使用示例：

// Get start/end nodes and offsets for range  
var startNode = // Code to get start node here, can be a text node or an element node
var startOffset = // Offset into the start node
var endNode = // Code to get end node here, can be a text node or an element node
var endOffset = // Offset into the end node

// Create the range
var range = document.createRange();
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);

// Parse the range using the ParsedRange class
var parsedRange = new ParsedRange(range);


parsedRange.text; // Contains visible text with whitespaces preserved.
parsedRange.highlight(startIndex, endIndex); // Will highlight the corresponding text inside parsedRange.text using browser selection

getSelection.toString（） - 不使用toString（）？

2 个答案: