如何用JavaScript正则替换指定内容并排除<ul>/<li>内的内容？

现有转义后的HTML字符串：text<br>text<br><ul><li>text</li></ul><br>，需要将所有text<br>替换为<div>text</div>，但要排除<ul>/<li>标签内的内容，同时不能把<ul>...</ul>后面的<br>错误替换。当前用.replace(/(.*?)<br>/g, '<div>$1</div>')会误处理ul结尾后的br，下面是两种解决办法：

方法1：优化正则表达式 #

用正则的断言规则限定替换范围，只处理不在ul标签里、且前面不是</ul>的<br>：

const str = 'text<br>text<br><ul><li>text</li></ul><br>';
const result = str.replace(/((?!&lt;\/?ul&gt;).)*?(?<!&lt;\/ul&gt;)&lt;br&gt;/g, '&lt;div&gt;$1&lt;/div&gt;');
console.log(result);

规则说明：

• (?!<\/?ul>).：确保匹配的内容不会碰到<ul>或</ul>标签，避开ul内部的内容
• (?<!&lt;\/ul&gt;)：检查<br>前面不是</ul>，防止把ul后面的br也套进div里

方法2：用DOM解析（更稳妥） #

正则处理HTML容易踩坑（比如嵌套ul、标签带特殊属性），用DOM API解析后操作更靠谱：

const str = 'text<br>text<br><ul><li>text</li></ul><br>';
// 先把转义字符还原成正常HTML
const html = str.replace(/&lt;/g, '<').replace(/&gt;/g, '>');

const tempDiv = document.createElement('div');
tempDiv.innerHTML = html;

// 遍历节点处理
const nodes = tempDiv.childNodes;
for (let i = 0; i < nodes.length; ) {
  const node = nodes[i];
  if (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'BR') {
    const prevNode = node.previousSibling;
    if (prevNode && prevNode.nodeType === Node.TEXT_NODE) {
      // 给前面的文本套div，替换掉文本和br
      const div = document.createElement('div');
      div.textContent = prevNode.textContent;
      tempDiv.replaceChild(div, prevNode);
      tempDiv.removeChild(node);
    } else if (prevNode && prevNode.tagName === 'UL') {
      // 前面是ul的话直接跳过这个br
      i++;
    }
  } else {
    i++;
  }
}

// 再把HTML转义回原格式
const result = tempDiv.innerHTML.replace(/</g, '&lt;').replace(/>/g, '&gt;');
console.log(result);

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