Выбрать всех детей из диапазона в браузере?

Question

Я пытаюсь получить массив всех слов, выбранных курсором из браузера, с помощью API window.Selection (). Я могу захватить само выделение с помощью window.getSelection (), а затем распечатать это содержимое с помощью window.getSelection (). ToString (), но, к сожалению, это просто объединяет слова без пробелов.

Вместо этого я хотел бы выделить текст и получить массив каждого из слов, потому что именно так они на самом деле добавляются в DOM (с помощью текстового слоя PDF). Таким образом,

The brown dog jumps

возвращает

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

Если вы используете .toString (), вы просто получаете

Thebrowndogjumps

Теперь, если я использую .getRangeAt () для получения диапазона, этот объект предоставит мне узел привязки (т. Е. 'The') и экстент-узел (т. Е. 'Jumps'), но я не уверен, как запечатлеть то, что находится между ними. Соответственно, я не могу выделить весь текст.

ПРИМЕЧАНИЕ: это довольно специфический вопрос, касающийся API window.getSelection () - ПОЖАЛУЙСТА, не просто предполагайте, что это какая-то базовая ерунда по манипуляции со строками, и ссылайтесь на некоторый «возможный дубликат», если ответ, на который вы ссылаетесь на самом деле обсуждает getSelection API.

Я спрашиваю конкретно, как вы получаете массив слов из возвращаемого объекта .getSelection ().

edit: вот некоторый код, который я пробовал, который запускает 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 () в качестве метода, который создает documentFragment, представляющий собой список HTMLElements, который затем можно перебрать, чтобы создать строку выбора.

Answer 1

Понял!Хитрость заключается в том, чтобы использовать метод .extractContents, который есть у объекта Range, чтобы получить HTMLElementList, содержащий каждый из элементов div.Оттуда вы можете получить доступ к их значениям 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)

Answer 2

Я не совсем понял, о чем вы спрашиваете, но, может быть, что-то вроде этого?

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>

Но, пожалуйста, дайте мне знать, что я за то решение, которое вы хотите, чтобы я мог изменить ответ.