javascript - 如果此 div 中不仅有文本，还有其他 html 节点（跨度、div ...），我如何获取和设置可编辑 div 中的插入符号位置？

Question

我正在尝试调整可编辑 DIV 中的插入符号位置，但如果DIV 包含其他节点，我将无法执行此操作。有人可以写我怎么做吗？非常感谢。我可以输入文本，并且可以在某种包装器（跨度、div 等）中输入将插入到此 div 中的某些字符，如果 div 包含其他节点，我如何获得插入符号的位置？

例如，我输入了几个字符并插入了我的令牌（括号）。插入跨度包装器中的第一个括号，但我无法为下一个括号找到正确的位置：

<div contenteditable="true">12<span class="with-token">[</span>34[5</div>

***To get:***
const getNodeOffset = node => (node == null ? -1 : 1 + 
getNodeOffset(node.previousSibling));

const getNodeTextLength = (node) => {
let textLength = 0;

if (node.nodeName === 'BR') {
    textLength = 1;
} else if (node.nodeName === '#text') {
    textLength = node.nodeValue.length;
} else if (node.childNodes != null) {
    for (let i = 0; i < node.childNodes.length; i += 1) {
        textLength += getNodeTextLength(node.childNodes[i]);
    }
}

return textLength;
};

const getTextLength = (parent, node, offset) => {
  let textLength = 0;
  if (node && node.nodeName === '#text') {
    textLength += offset;
} else {
    for (let i = 0; i < offset; i += 1) {
        textLength += getNodeTextLength(node.childNodes[i]);
    }
}

if (node !== parent) {
    textLength += getTextLength(parent, node.parentNode, 
getNodeOffset(node));
}

return textLength;
};

const getTextSelection = (editor) => {
   const selection = window.getSelection();

   if (selection != null && selection.rangeCount > 0) {
      const range = selection.getRangeAt(0);
      return {
        start: getTextLength(editor, range.startContainer, 
         range.startOffset),
        end: getTextLength(editor, range.endContainer, range.endOffset)
    };
   } else return null;
};



***To set:***
 function createRange(node, chars, range) {
   let currentRange = range;
   if (!currentRange) {
     currentRange = document.createRange();
     currentRange.selectNode(node);
     currentRange.setStart(node, 0);
   }

   if (chars.count === 0) {
     currentRange.setEnd(node, chars.count);
   } else if (node && chars.count > 0) {
     if (node.nodeType === Node.TEXT_NODE) {
        if (node.textContent.length < chars.count) {
            chars.count -= node.textContent.length;
        } else {
            currentRange.setEnd(node, chars.count);
            chars.count = 0;
        }
    } else {
        for (let lp = 0; lp < node.childNodes.length; lp += 1) {
            currentRange = createRange(node.childNodes[lp], chars, 
   currentRange);

            if (chars.count === 0) {
                break;
            }
        }
    }
}
return currentRange;}

function setCurrentCursorPosition(node, chars) {
 if (chars >= 0) {
    const selection = window.getSelection();

    const range = createRange(node, { count: chars });

    if (range) {
        range.collapse(false);
        selection.removeAllRanges();
        selection.addRange(range);
    }
  }
}

标签： javascripthtml