如何查找或删除元素innerHTML中指定位置的纯文本内容

你需要的功能可以通过遍历目标元素的所有子节点，按顺序收集纯文本节点后定位操作实现，以下是完整可运行的 JS 实现：

核心工具函数 #

// 递归收集元素内所有非空文本节点，忽略空白文本节点
function getTextNodes(el) {
  const nodes = []
  const childNodes = el.childNodes
  for (let i = 0; i < childNodes.length; i++) {
    const node = childNodes[i]
    if (node.nodeType === Node.TEXT_NODE && node.textContent.trim()) {
      nodes.push(node)
    } else if (node.nodeType === Node.ELEMENT_NODE) {
      nodes.push(...getTextNodes(node))
    }
  }
  return nodes
}

查找第n位纯文本字符 #

注：n 从1开始计数，符合示例中的计数规则

function getNthChar(el, n) {
  const textNodes = getTextNodes(el)
  let count = 0
  for (const node of textNodes) {
    const len = node.textContent.length
    if (count + len >= n) {
      return node.textContent[n - count - 1]
    }
    count += len
  }
  return null // 超出总文本长度时返回空
}

删除倒数第n位纯文本字符 #

注：传入n=1即可删除最后一位文本字符

function deleteLastNthChar(el, n = 1) {
  const textNodes = getTextNodes(el)
  let count = 0
  // 倒序遍历文本节点快速定位末尾位置
  for (let i = textNodes.length - 1; i >= 0; i--) {
    const node = textNodes[i]
    const len = node.textContent.length
    if (count + len >= n) {
      const cutIndex = len - (n - count)
      node.textContent = node.textContent.slice(0, cutIndex) + node.textContent.slice(cutIndex + 1)
      // 可选：删空的文本节点直接移除
      if (!node.textContent.trim()) node.remove()
      return true
    }
    count += len
  }
  return false // 超出总文本长度删除失败
}

使用示例（匹配测试场景） #

const targetEl = document.getElementById('foo')
// 查找第4位字符
console.log(getNthChar(targetEl, 4)) // 输出：d
// 连续删除最后一位
deleteLastNthChar(targetEl) // 第一次删除 z
deleteLastNthChar(targetEl) // 第二次删除 g

如果需要实现删除正数第n位的功能，参考查找函数的正序遍历逻辑调整删除函数即可。

内容的提问来源于stack exchange，提问作者esac