如何为HTML字符串添加<br>标签同时保留HTML属性完整？

核心思路是仅处理<pre>标签内部的换行符，同时完全避开HTML属性（比如img的src），最可靠的方式是用DOM解析来处理，避免正则带来的各种边界问题。

前端浏览器环境实现 #

直接利用浏览器原生DOM API，自动隔离元素内容与属性，不会破坏base64编码：

function convertPreNewlinesToBr(htmlStr) {
  const tempContainer = document.createElement('div');
  tempContainer.innerHTML = htmlStr;

  // 遍历所有<pre>元素
  const preElements = tempContainer.querySelectorAll('pre');
  preElements.forEach(pre => {
    // 处理<pre>内的每个文本节点
    Array.from(pre.childNodes).forEach(node => {
      if (node.nodeType === Node.TEXT_NODE) {
        const textParts = node.textContent.split('\n');
        const fragment = document.createDocumentFragment();
        
        textParts.forEach((part, idx) => {
          fragment.appendChild(document.createTextNode(part));
          // 除了最后一段文本，后面加<br>
          if (idx !== textParts.length - 1) {
            fragment.appendChild(document.createElement('br'));
          }
        });
        
        pre.replaceChild(fragment, node);
      }
    });
  });

  return tempContainer.innerHTML;
}

后端Node.js环境实现 #

用jsdom模拟DOM环境，逻辑和前端一致：

const { JSDOM } = require('jsdom');

function convertPreNewlinesToBr(htmlStr) {
  const dom = new JSDOM('');
  const tempContainer = dom.window.document.createElement('div');
  tempContainer.innerHTML = htmlStr;

  const preElements = tempContainer.querySelectorAll('pre');
  preElements.forEach(pre => {
    Array.from(pre.childNodes).forEach(node => {
      if (node.nodeType === node.TEXT_NODE) {
        const textParts = node.textContent.split('\n');
        const fragment = dom.window.document.createDocumentFragment();
        
        textParts.forEach((part, idx) => {
          fragment.appendChild(dom.window.document.createTextNode(part));
          if (idx !== textParts.length - 1) {
            fragment.appendChild(dom.window.document.createElement('br'));
          }
        });
        
        pre.replaceChild(fragment, node);
      }
    });
  });

  return tempContainer.innerHTML;
}

不推荐但可用的正则方案（限简单HTML结构） #

如果无法使用DOM解析，可尝试正则匹配<pre>内部内容并替换换行，但仅适用于结构简单、无异常属性的HTML：

function convertPreNewlinesToBr(htmlStr) {
  // 匹配<pre>标签内部的所有内容，避开属性区域
  return htmlStr.replace(/(?<=<pre[^>]*>)([\s\S]*?)(?=<\/pre>)/g, (innerContent) => {
    return innerContent.replace(/\n/g, '<br>');
  });
}

注意：正则方案存在局限性，比如当<pre>标签属性中包含>字符（不符合规范但可能出现），或存在嵌套标签时会失效，优先选择DOM方案。

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