Javascript 如果该div中不仅有文本，而且还有其他html节点（span，div…），如何获取和设置可编辑div中的插入符号位置？

我正在尝试调整可编辑DIV中插入符号的位置，但如果DIV包含其他节点，则无法调整插入符号的位置。有人能写信告诉我怎么做吗？谢谢。 我可以输入文本，也可以输入某些字符，这些字符将插入到某种包装器（span、div等）中的这个div中，如果该div包含其他节点，如何获取插入符号位置

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

12[34[5
***要获得：***
常量getNodeOffset=node=>（node==null？-1:1+
getNodeOffset（node.previousSibling））；
常量getNodeTextLength=（节点）=>{
设textLength=0；
如果（node.nodeName==='BR'）{
textLength=1；
}else if（node.nodeName=='#text'）{
textLength=node.nodeValue.length；
}else if（node.childNodes！=null）{
for（设i=0；i{
设textLength=0；
if（node&&node.nodeName=='#text'）{
textLength+=偏移量；
}否则{
对于（设i=0；i{
const selection=window.getSelection（）；
if（selection！=null&&selection.rangeCount>0）{
const range=selection.getRangeAt（0）；
返回{
开始：getTextLength（编辑器，range.startContainer，
射程（起始时间集），
结束：getTextLength（编辑器，range.endContainer，range.endOffset）
};
}否则返回null；
};
***设置：***
函数createRange（节点、字符、范围）{
让currentRange=范围；
如果（！currentRange）{
currentRange=document.createRange（）；
currentRange.selectNode（节点）；
currentRange.setStart（节点，0）；
}
if（chars.count==0）{
currentRange.setEnd（节点、字符数）；
}else if（节点和字符数>0）{
if（node.nodeType===node.TEXT\u节点）{
if（node.textContent.length=0）{
const selection=window.getSelection（）；
const range=createRange（节点，{count:chars}）；
如果（范围）{
范围。塌陷（假）；
selection.removeAllRanges（）；
选择。添加范围（范围）；
}
}
}

如果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);
    }
  }
}