JavaScript：如何获取元素带指定格式的文本内容（过滤链接标签）

需求明确 #

从页面的#sub-div元素中提取内容时，需要：

• 保留<b>这类格式标签（或用其他标识替代，比如Markdown的*）
• 移除<a>链接标签，只保留链接的文本内容
• 不能直接用textContent（会丢失所有格式），也不能直接用innerHTML（会保留不需要的<a>标签）

实现方案 #

方案1：保留原HTML格式标签

通过克隆节点、移除指定标签的方式，得到符合要求的HTML内容：

// 获取目标元素
const subDiv = document.getElementById('sub-div');
// 克隆元素，避免改动原页面DOM
const cloned = subDiv.cloneNode(true);
// 找出所有a标签并替换成纯文本
cloned.querySelectorAll('a').forEach(link => {
  link.replaceWith(document.createTextNode(link.textContent));
});
// 拿到处理后的结果
const finalContent = cloned.innerHTML;
// 输出结果：Lorem <b>ipsum</b> dolor sit amet, consectetur adipisici elit
console.log(finalContent);

方案2：转换成自定义格式标识（比如Markdown加粗）

如果不想保留HTML标签，想用*这类标识表示加粗，可以遍历节点构建内容：

const subDiv = document.getElementById('sub-div');
let finalContent = '';

// 递归遍历节点的函数
function walkThrough(node) {
  if (node.nodeType === Node.TEXT_NODE) {
    // 文本节点直接追加内容
    finalContent += node.textContent;
  } else if (node.nodeType === Node.ELEMENT_NODE) {
    if (node.tagName === 'B') {
      // b标签用*包裹文本
      finalContent += `*${node.textContent}*`;
    } else if (node.tagName !== 'A') {
      // 非a、非b的其他元素，继续遍历子节点（如果有需要保留的其他格式标签可扩展）
      walkThrough(node.firstChild);
    } else {
      // a标签只取文本内容
      finalContent += node.textContent;
    }
  }
}

// 开始遍历
walkThrough(subDiv);
// 输出结果：Lorem *ipsum* dolor sit amet, consectetur adipisici elit
console.log(finalContent);

说明 #

• 方案1适合需要保留HTML格式的场景，后续可以直接插入页面使用
• 方案2适合需要转换成纯文本格式（比如Markdown）的场景，按需调整标识即可

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