JavaScript正则替换HTML元素：替换冲突与换行失效问题求助

原始需求 #

需对以下文本执行三项正则替换：

const text = "1x 15 inch Free Choice Pizza
<br>Tomato Base
<br>Stuffed Crust Cheese, Garlic & Herbs
<br>
Sweetcorn<br>
Onion<br>
Salami<br>
Chicken - 19.68~<br>
2x BBQ Dip - 1.00~<br>2x Meat Lasagne - 12.98~<br>
1x Vanilla Haagen Dazs Ice Cream - 5.99~<br>
1x Strawberry Cheesecake Haagen Dazs Ice Cream - 5.99~<br>
1x Cookies & Cream Haagen Dazs Ice Cream - 5.99~<br>
2x Water - 1.98~"

替换规则：

• 将**独立的<br>**替换为xxx<br>，忽略~<br>这类带波浪号的情况
• 将空格包裹的-替换为<span class="float-end">£
• 将所有~替换为</span>

问题分析 #

之前的代码存在两个核心问题：

1. 替换顺序错误导致<br>被重复修改，或部分~未被处理
2. 字符串末尾无<br>跟随的~被遗漏

正确实现方案 #

调整替换顺序，同时单独处理末尾的~，代码如下：

const replacedText = text
  // 先匹配前面无~的独立<br>，替换为xxx<br>
  .replaceAll(/(?<!~)<br>/g, 'xxx<br>')
  // 处理带~的<br>，替换为</span><br>
  .replaceAll(/~<br>/g, '</span><br>')
  // 替换空格包裹的-
  .replaceAll(/ - /g, '<span class="float-end">£')
  // 单独匹配字符串末尾的~，补上</span>
  .replaceAll(/~$/, '</span>');

方案说明 #

1. 优先处理独立<br>：用后瞻断言(?<!~)确保只匹配前面没有~的<br>，避免后续修改~<br>时产生冲突
2. 再处理~<br>：直接替换为</span><br>，此时已完成独立<br>的修改，不会互相干扰
3. 替换空格-：这一步不涉及<br>和~，不会影响之前的处理结果
4. 单独处理末尾~：用~$精准匹配字符串最后一个无<br>的~，补上缺失的闭合标签

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