在属性contenteditable为true的元素上点击时获取光标所在位置前childNodes的长度

您可以使用`window.getSelection()`函数来获取当前选中的文本范围，然后使用`anchorOffset`属性来获取光标所在位置前的字符数。具体代码如下：

// 获取当前选中的文本范围
var selection = window.getSelection();
// 获取光标所在位置前的字符数
var cursorPos = selection.anchorOffset;
// 获取光标所在节点的父节点
var parentNode = selection.anchorNode.parentNode;
// 获取光标所在节点的所有子节点
var childNodes = parentNode.childNodes;
// 获取光标所在位置前childNodes的长度
var length = 0;
for (var i = 0; i < childNodes.length; i++) {
  if (childNodes[i] == selection.anchorNode) {
    length += cursorPos;
    break;
  } else {
    length += childNodes[i].textContent.length;
  }
}
console.log(length);

需要注意的是，这段代码假定光标所在节点只有一个父节点，并且该父节点的所有子节点都是文本节点。如果您的需求不同，可能需要进行相应的修改。

相关问题

在属性contenteditable为true的元素中有文本节点和html节点，点击改元素时获取光标所在位置前childNodes的长度

好的，针对你的问题，我可以提供以下代码来获取光标所在位置前childNodes的长度：

// 获取当前光标对象
var selection = window.getSelection();
// 获取当前光标所在的节点对象
var node = selection.anchorNode;
// 判断当前光标所在的节点是否为文本节点
if (node.nodeType === Node.TEXT_NODE) {
  // 获取光标所在位置前面所有的子节点
  var childNodes = node.parentNode.childNodes;
  // 获取当前光标在文本节点中的偏移量
  var offset = selection.anchorOffset;
  // 遍历子节点，计算光标所在位置前的子节点数量
  var count = 0;
  for (var i = 0; i < childNodes.length; i++) {
    var childNode = childNodes[i];
    if (childNode === node) {
      count += offset;
      break;
    } else {
      count += childNode.textContent.length;
    }
  }
  console.log('光标所在位置前childNodes的长度:', count);
}

这段代码可以用于处理属性 `contenteditable` 为 true 的元素中的内容，包括文本和 HTML 节点，并且可以获取光标所在位置前的子节点数量。

在属性 contenteditable 为 true 的元素中获取光标所在位置前的html子节点数量

好的，要获取光标所在位置前的HTML子节点数量，可以先获取当前光标所在的节点对象，然后再遍历它的所有前面的兄弟节点，统计其中的HTML节点数量。

下面是实现代码：

// 获取当前光标对象
var selection = window.getSelection();
// 获取当前光标所在的节点对象
var node = selection.anchorNode;
// 判断当前光标所在的节点是否为元素节点
if (node.nodeType === Node.ELEMENT_NODE) {
  // 获取光标所在位置前面所有的兄弟节点
  var siblings = Array.from(node.parentNode.childNodes).slice(0, Array.from(node.parentNode.childNodes).indexOf(node));
  // 统计兄弟节点中的HTML节点数量
  var count = 0;
  siblings.forEach(function (sibling) {
    if (sibling.nodeType === Node.ELEMENT_NODE) {
      count++;
    }
  });
  console.log('光标所在位置前的HTML子节点数量：', count);
}

这段代码可以用于处理属性 `contenteditable` 为 true 的元素中的内容，包括文本和 HTML 节点，并且可以获取光标所在位置前的 HTML 子节点数量。