如何获取元素的HTML内容，仅保留br标签而忽略其他所有子标签

架构老林

2026-9-26

实现方案：提取元素内容仅保留<br>标签

核心思路

遍历目标<div>的所有子节点
若节点为<br>标签则直接保留
若节点为其他元素类型，递归提取该元素内的所有纯文本内容
若节点为文本类型，直接保留文本内容

jQuery 实现代码

function getContentKeepBr($element) {
  let result = '';
  $element.contents().each(function() {
    // 处理文本节点
    if (this.nodeType === 3) {
      result += this.nodeValue;
    // 处理元素节点
    } else if (this.nodeType === 1) {
      if (this.tagName.toLowerCase() === 'br') {
        result += '<br>';
      } else {
        // 递归处理其他元素的子节点
        result += getContentKeepBr($(this));
      }
    }
  });
  return result;
}

// 调用示例
const targetContent = getContentKeepBr($('div.test'));
console.log(targetContent);

原生 JavaScript 实现代码

function getContentKeepBr(element) {
  let result = '';
  const childNodes = element.childNodes;
  for (let i = 0; i < childNodes.length; i++) {
    const node = childNodes[i];
    // 处理文本节点
    if (node.nodeType === 3) {
      result += node.nodeValue;
    // 处理元素节点
    } else if (node.nodeType === 1) {
      if (node.tagName.toLowerCase() === 'br') {
        result += '<br>';
      } else {
        // 递归处理其他元素的子节点
        result += getContentKeepBr(node);
      }
    }
  }
  return result;
}

// 调用示例
const targetElement = document.querySelector('div.test');
const targetContent = getContentKeepBr(targetElement);
console.log(targetContent);