Div contenteditable: получаване и изтриване на дума, предхождаща каретка

Благодарение на този въпрос и отговор, публикуван от Тим ​​Даун, аз направи функция за получаване на думата, предшестваща каретката, в "contenteditable" div.

Ето цигулка и ето функцията:

function getWordPrecedingCaret (containerEl) {
    var preceding = "",
        sel,
        range,
        precedingRange;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount > 0) {
            range = sel.getRangeAt(0).cloneRange();
            range.collapse(true);
            range.setStart(containerEl, 0);
            preceding = range.toString();
        }
    } else if ((sel = document.selection) && sel.type != "Control") {
        range = sel.createRange();
        precedingRange = range.duplicate();
        precedingRange.moveToElementText(containerEl);
        precedingRange.setEndPoint("EndToStart", range);
        preceding = precedingRange.text;
    }
    var lastWord = preceding.match(/(?:\s|^)([\S]+)$/i);
    if (lastWord) {
        return lastWord;
    } else {
        return false;
    }
}

Моят въпрос: След като получа последната дума, как мога да я премахна от div? Обърнете внимание, че не искам да премахвам каквото и да е срещане на думата в div, само срещане пред каретката.

Благодаря ви предварително!


javascript html jquery range contenteditable
person Baptiste D.    schedule 22.07.2014    source източник

Отговори (2)


arrow_upward
0
arrow_downward

Можете да опитате да използвате свойството index на match()

var lastWordPosition = preceding.match(/(?:\s|^)([\S]+)$/i).index;

След това можете да направите substring(0, lastWordPosition) или каквото искате...

person Kaiido    schedule 22.07.2014

arrow_upward
0
arrow_downward

Хубаво решение да получите думата преди каретката

export function getWordBeforeCare() {
  const range = window.getSelection().getRangeAt(0);
  if (range.collapsed) {
    const text = range.startContainer.textContent.substring(
      0,
      range.startOffset + 1
    );
    return (
      text
        .split(/\s/g) // if you want the last word until the space
        // .split(/\b/g) //if you want the last word until a non caractere
        .pop()
        .trim()
    );
  }
  return "";
}
person Paolo Castro    schedule 28.02.2020