从浏览器的范围中选择所有孩子？答案

【问题标题】：Select all children from a range in browser?从浏览器的范围中选择所有孩子？
【发布时间】：2019-09-27 12:58:50
【问题描述】：

我正在尝试使用 window.Selection() API 从浏览器中获取我用光标选择的所有单词的数组。我可以使用 window.getSelection() 捕获选择本身，然后通过 window.getSelection().toString() 将这些内容打印出来，但不幸的是，这只是将单词连接在一起而没有空格。

相反，我想选择文本并获取每个单词的数组，因为这就是它们实际上被附加到 DOM 的方式（通过 PDF 文本层）。所以，

The brown dog jumps

['The', 'brown', 'dog', 'jumps']

如果你使用 .toString()，你只需得到

Thebrowndogjumps

现在，如果我使用 .getRangeAt() 来获取范围，该对象将为我提供锚节点（即“The”）和 extentNode（即“jumps”），但我不知道如何捕捉两者之间的内容。因此，我无法选择所有文本。

注意：这是一个涉及 window.getSelection() API 的非常具体的问题 - 请不要仅仅假设这是一些基本的字符串操作废话并链接到一些“可能的重复”，除非您链接到的答案实际上讨论 getSelection API。

我特意问的是如何从返回的 .getSelection() 对象中获取单词数组。

编辑：这是我尝试过的一些触发 onKeyUp() 的代码：

  handleSelect = (text) => {
    const selectObj = window.getSelection();
    console.log(selectObj)
    let selection = selectObj.toString();
    console.log(selection)
    let ranges = []
    for(let i = 0; i < selectObj.rangeCount; i++) {
      ranges[i] = selectObj.getRangeAt(i);
     }
     console.log(ranges[0])
     let rangeObj = ranges[0]
     console.log(rangeObj.extractContents())
     debugger
    // let range = selectObj.getRangeAt()
    // console.log(range)
  }

这有点hacky，但我解决了：

  handleSelect = (text) => {
    const selectObj = window.getSelection();
    let selection = selectObj.toString();
    let ranges = []
    for(let i = 0; i < selectObj.rangeCount; i++) {
      ranges[i] = selectObj.getRangeAt(i);
     }
     let rangeObj = ranges[0]
    let content = rangeObj.extractContents()
    let str = ""
    for (let i = 1; i < content.children.length - 1; i++) {
      str += ' ' + content.children[i].innerText
    }
    console.log(str)

基本上，Range 对象具有 .extractContents() 作为一种方法，该方法创建一个作为 HTMLElement 列表的 documentFragment，然后您可以遍历它以创建选择字符串。

【问题讨论】：

请向我们展示您的尝试。没有代码，你的问题没有多大意义。
@yoursweater 能否请您替换图像以进行等效的代码提取，以便我可以复制并尝试使用它？
@RicardoRocha 实际上解决了它......关键是找出 Range.extractContents()
@yoursweater 不错！发布您的答案并接受它，以便其他人在需要时可以得到您的帮助。
@RicardoRocha 感谢您的帮助

标签： javascript dom browser selection

【解决方案1】：

我没看清楚你在问什么，但也许是这样的？

let button = document.getElementById("button");
button.onclick = () => {
   let array = window.getSelection().toString().split(" ");
    console.log(array);
}

This is a text! Nice to have a text selected!

<button id="button">Print selection</button>

但是，请告诉我，我非常支持您想要的解决方案，所以我可以更改答案。

【讨论】：

这个问题是因为我从 PDF 文本层中抓取文本，每个单词都保存在一个单独的 div 中，没有空格，所以 split(' ') 不起作用，因为您正在尝试拆分此文本：“Thisisatext！Nicetohaveatextselected”
@yoursweater 你能举一个你试图提取信息的PDF文本层内容的例子吗？
确定。为你添加了。

【解决方案2】：

知道了！诀窍是使用 Range 对象具有的方法 .extractContents 来获取包含每个 div 的 HTMLElementList。从那里，您可以访问它们的 innerText 值，以便将它们附加到字符串或数组中：

  handleSelect = (text) => {
    const selectObj = window.getSelection();
    let selection = selectObj.toString();
    let ranges = []
    for(let i = 0; i < selectObj.rangeCount; i++) {
      ranges[i] = selectObj.getRangeAt(i);
    }
    let rangeObj = ranges[0]
    let content = rangeObj.extractContents()
    let str = ""
    for (let i = 1; i < content.children.length - 1; i++) {
      str += ' ' + content.children[i].innerText
    }
    console.log(str)

【讨论】：