js将下标标签转为

<p>This is a chemical formula: H<sub>2</sub>O</p>

// 获取包含下标的元素
const paragraph = document.querySelector('p');

// 创建一个DocumentFragment来处理文本
const fragment = document.createDocumentFragment();
let lastIndex = 0;

// 遍历所有子节点
paragraph.childNodes.forEach(node => {
  if (node.nodeType === Node.ELEMENT_NODE && node.tagName.toLowerCase() === 'sub') {
    // 将当前位置到<sub>标签之前的文本添加到fragment
    if (lastIndex < node.offsetLeft) {
      fragment.appendChild(document.createTextNode(paragraph.textContent.slice(lastIndex, node.offsetLeft)));
    }
    // 添加下标的表示，这里以下划线为例
    fragment.appendChild(document.createTextNode('_'));
    // 添加<sub>标签内的文本
    fragment.appendChild(document.createTextNode(node.textContent));
    // 更新lastIndex
    lastIndex = node.offsetLeft + node.textContent.length;
  }
});

// 添加剩余的文本
if (lastIndex < paragraph.textContent.length) {
  fragment.appendChild(document.createTextNode(paragraph.textContent.slice(lastIndex)));
}

// 替换原段落的内容
paragraph.textContent = '';
paragraph.appendChild(fragment);