移动端隐藏文本首尾<br>标签，保留中间换行的技术实现问题

问题背景 #

需要在移动端视图中隐藏<p>标签内首尾所有的<br>，但保留文本块之间的2个<br>来维持布局；要求不能删除<br>标签，仅通过隐藏实现，原有JS判断逻辑在存在中间文本时无法正确识别所有首尾<br>。

原有代码的问题 #

原isFirstOrLastChildBr函数仅能判断第一个/最后一个非空白文本节点是否为<br>，无法处理连续多个首尾<br>（比如<p><br><br>文本<br><br>文本<br><br></p>这种场景），会漏判部分需要隐藏的<br>。

解决方案 #

1. 改进节点判断逻辑，精准定位首尾所有<br>

编写函数遍历<p>的首尾节点，跳过空白文本节点，收集所有连续的首尾<br>：

// 判断是否为空白文本节点
const isWhitespaceText = (node) => {
  return node && node.nodeType === 3 && /^\s*$/.test(node.data);
};

// 判断是否为BR标签（统一转小写避免大小写问题）
const isBrElement = (el) => {
  return el && el.nodeType === 1 && el.tagName.toLowerCase() === 'br';
};

// 获取所有需要隐藏的首尾BR节点
export const getLeadingAndTrailingBrs = (parentEl) => {
  const brsToHide = [];
  let currentNode = parentEl.firstChild;

  // 遍历开头：收集所有连续的BR，跳过空白文本
  while (currentNode) {
    if (isBrElement(currentNode)) {
      brsToHide.push(currentNode);
      currentNode = currentNode.nextSibling;
    } else if (isWhitespaceText(currentNode)) {
      currentNode = currentNode.nextSibling;
    } else {
      // 遇到有效内容节点，停止遍历开头
      break;
    }
  }

  // 遍历结尾：收集所有连续的BR，跳过空白文本
  currentNode = parentEl.lastChild;
  while (currentNode) {
    if (isBrElement(currentNode)) {
      brsToHide.push(currentNode);
      currentNode = currentNode.previousSibling;
    } else if (isWhitespaceText(currentNode)) {
      currentNode = currentNode.previousSibling;
    } else {
      // 遇到有效内容节点，停止遍历结尾
      break;
    }
  }

  return brsToHide;
};

2. 结合移动端判断，动态控制<br>的显示

通过视口宽度判断移动端，给目标<br>添加/移除隐藏类：

// 控制BR显示隐藏的核心逻辑
const handleBrVisibility = () => {
  // 自定义移动端分界宽度，这里以768px为例
  const isMobile = window.innerWidth <= 768;
  const pElements = document.querySelectorAll('p');

  pElements.forEach(p => {
    const targetBrs = getLeadingAndTrailingBrs(p);
    targetBrs.forEach(br => {
      br.classList.toggle('mobile-hidden', isMobile);
    });
  });
};

// 页面初始化时执行
handleBrVisibility();
// 监听窗口大小变化，适配响应式场景
window.addEventListener('resize', handleBrVisibility);

3. CSS隐藏样式

通过媒体查询配合类实现隐藏，确保仅在移动端生效：

@media (max-width: 768px) {
  .mobile-hidden {
    display: none;
  }
}

效果说明 #

• 对于<p><br><br>文本A<br><br>文本B<br><br></p>这类结构，移动端会隐藏首尾的2个<br>，保留文本A和文本B之间的2个<br>；
• 自动跳过空白文本节点，不会误判包含空白文本的首尾场景；
• 窗口大小变化时会自动重新计算，适配响应式布局。

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