Как получить конкретный выбор из contenteditable

Question

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

Привет, мой мир

из указанного выше входного значения, я хочу выбрать только слово «My» и получить его строковое значение.

На данный момент я написал функцию, которая получает выделение до каретки из диапазона 0, например:

function selectUptoCaret(el){
    var range = window.getSelection().getRangeAt(0);
    var preCaretRange = range.cloneRange();
    preCaretRange.selectNodeContents(el);
    preCaretRange.setEnd(range.endContainer, range.endOffset);

    var sel = window.getSelection()
    sel.removeAllRanges()
    sel.addRange(preCaretRange)
  }

Когда я нажимаю «y» в слове «My», выбирается «Hello My». но опять же, я хочу выбрать «Мой», а не «Привет, мой».

Answer 1

Я думаю, что вы в основном там, но проблема, которую вы получаете, когда все слева от каретки выделено, вероятно, связана с тем фактом, что вы не звоните preCaretRange.setStart(), и поэтому он думает, что старт долженбыть ноль.Я немного изменил вашу функцию, чтобы заставить ее выбирать фактическое слово, в котором находится ваш курсор:

function selectUptoCaret(el){
    var range = window.getSelection().getRangeAt(0);
    var preCaretRange = range.cloneRange();

    var startOffset = range.startContainer.textContent.lastIndexOf(' ', range.startOffset);
    var endOffset = range.endContainer.textContent.indexOf(' ', range.endOffset);

    preCaretRange.selectNodeContents(el);
    preCaretRange.setStart(range.startContainer, ~startOffset ? startOffset + 1: 0);
    preCaretRange.setEnd(range.endContainer, ~endOffset ? endOffset : range.endContainer.textContent.length);

    var sel = window.getSelection()
    sel.removeAllRanges()
    sel.addRange(preCaretRange)
}

Я предполагаю, что параметр el, переданный в selectUptoCaret, является фактическим контентом.element.

Мои изменения были:

• занять позицию курсора и получить позицию следующего и предыдущего пробелов
• , если предыдущий пробел отсутствует (определяетсяпроверку ~startOffset) мы начнем с 0, потому что мы находимся в первом слове
• , если нет следующего пробела (определяется проверкой ~endOffset), мы будем использовать всю длину текстового содержимого, потому чтомы в последнем слове.
• установите setStart на нашем preCaretRange объекте, чтобы убедиться, что у нас есть конечная начальная точка, которая не обязательно является началом текстового содержимого

Примечание: моя троичная ~startOffset ? startOffset + 1 : 0 эквивалентна поговорке startOffset > -1 ? startOffset + 1 : 0.Использование побитового оператора ~ - это удобный способ проверить, что значение не равно -1 (начиная с ~ -1 === 0).

Теперь оно будет выбирать только текущее слово в позиции вашей каретки.