要从浏览器中选择所有子级吗？

Question

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

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

The brown dog jumps

返回

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

如果使用.toString（），则只需获取

Thebrowndogjumps

现在，如果我使用.getRangeAt（）来获取范围，则该对象将为我提供锚点（即“ The”）和scopeNode（即“ 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)
  }

有点黑，但是我解决了：

  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的列表，然后您可以循环访问以创建选择字符串。

Answer 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>

但是，请告诉我，我很想得到您想要的解决方案，所以我可以更改答案。

Answer 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)