如何优雅解决多<br>标签重复问题？JavaScript文本优化

问题 #

我编写了一个文本替换脚本，功能正常，但因替换内容位置相邻，导致值之间出现多个<br>标签，最终呈现的格式存在冗余换行与重复<br>。需求是将值之间的多个连续<br>（包括中间夹杂空白换行的情况）统一替换为单个<br>，当前硬编码的处理方式不够优雅，希望获取正则表达式或其他更优解决方案。

原JS代码：

function textareadValue() {
        var mystring =``;
        mystring = document.getElementById("myTextArea").value;
        var find1 = ["DEER", "ELK", "PANDA", "THUNDERBIRD", "Text for DELETE 1", "Text for DELETE 3", "Text for DELETE 4", "Text for DELETE 5", "Text for DELETE 6", "Text for DELETE 7", "Text for DELETE 8", "Text for DELETE 9", "Text for DELETE 10"];
        var find2 = /(\d{4})/g;
        var find3 =["REPLACE THIS TEXT 1","REPLACE THIS TEXT 2", "REPLACE THIS TEXT 3", "REPLACE THIS TEXT 4",  "REPLACE THIS TEXT 5"];
        var replace="<br />";
        var replace3 = ["TEXT REPLACED 1","TEXT REPLACED 2", "TEXT REPLACED 3","TEXT REPLACED 4","TEXT REPLACED 5"];
            
        for (i=0; i<find1.length; i++){
          var regex = new RegExp(find1[i],"g");
           mystring = mystring.replace(regex, "");
       }
        for (i=0; i<mystring.length; i++){
            mystring = mystring.replace(find3[i], replace3[i]);
       }
            
        mystring = mystring.replace(find2, replace);
        
        document.getElementById('result').innerHTML=mystring;
            
        console.log(mystring);
        } 

原HTML代码：

<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Clear text</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<body>
  <div class="columns mt-0 pt-0 mb-5 is-mobile">
    <div class="column"></div>
    <div class="column is-three-quarters mb3">
  <div class="field">
    <label class="label">Enter text here:</label>
    <div class="control">
      <textarea class="textarea" placeholder="Text" id="myTextArea">Text Value 
DEER
2024
Text Value 
DEER
2024
Text Value 
ELK
2024
REPLACE THIS TEXT 1
ELK
2024
Text Value 
ELK
2024
Text Value 
ELK
2024
Text for DELETE 1
2024
Text for DELETE 2
2024
Text for DELETE 4
THUNDERBIRD
2024
Text Value 
ELK
2024
Text Value 
ELK
2024
Text for DELETE 5
DEER
2024
Text for DELETE 6
ELK
2024
Text Value 
ELK
2024
REPLACE THIS TEXT 2
ELK
2024
Text Value 
ELK
2024
REPLACE THIS TEXT 3
ELK
2024
Text Value 
ELK
2024
Text Value 
ELK
2024
REPLACE THIS TEXT 4
ELK
2024
Text Value 
ELK
2024
Text Value 
ELK
2024
Text Value 
ELK
2024
Text Value 
ELK
2024
Text Value 
ELK
2024
Text Value 
THUNDERBIRD
2024
Text Value 
ELK
2024
Text Value 
DEER
Text Value 
Text Value
ELK
2024
Text Value 
DEER
2024
Text Value 
DEER
2024
Text Value 
DEER
2024
Text Value 
DEER
2024
Text Value 
DEER
2024
Text Value 
ELK
2024
Text Value 
PANDA
2024
Text Value 
DEER
2024
Text Value 
PANDA
2024
Text for DELETE 7
PANDA
2024
Text Value 
THUNDERBIRD
2024
Text Value 
DEER
2024
PANDA
2024
Text Value 
THUNDERBIRD
2024
Text for DELETE 9
PANDA
2024
Text for DELETE 10
2024</textarea><Br>
       <button class="button is-link" onclick="textareadValue();">Clean</button>
    </div>
  </div><br clear="all">
   <div id="result" class="pl-10"></div>
 </div>
<div class="column"></div>
</div>
  </body>

解决方案 #

核心：正则表达式合并连续<br>及空白换行 #

使用以下正则表达式，匹配连续的<br>标签（包括前后的空白、换行符等），并替换为单个<br>：

/(<br \/>\s*)+/g

• <br \/>：匹配转义后的<br />标签
• \s*：匹配任意数量的空白字符（换行、空格、制表符等）
• +：匹配前面的组合至少一次，覆盖所有连续重复的情况

优化原代码问题 #

原代码第二个for循环存在逻辑错误：遍历mystring.length会导致大量无效循环，应改为遍历find3的长度。同时将合并<br>的逻辑放在所有替换操作之后执行。

修改后的完整JS代码 #

function textareadValue() {
    var mystring = document.getElementById("myTextArea").value;
    var find1 = ["DEER", "ELK", "PANDA", "THUNDERBIRD", "Text for DELETE 1", "Text for DELETE 3", "Text for DELETE 4", "Text for DELETE 5", "Text for DELETE 6", "Text for DELETE 7", "Text for DELETE 8", "Text for DELETE 9", "Text for DELETE 10"];
    var find2 = /(\d{4})/g;
    var find3 =["REPLACE THIS TEXT 1","REPLACE THIS TEXT 2", "REPLACE THIS TEXT 3", "REPLACE THIS TEXT 4",  "REPLACE THIS TEXT 5"];
    var replace="<br />";
    var replace3 = ["TEXT REPLACED 1","TEXT REPLACED 2", "TEXT REPLACED 3","TEXT REPLACED 4","TEXT REPLACED 5"];
        
    // 删除指定文本
    for (let i=0; i<find1.length; i++){
        var regex = new RegExp(find1[i],"g");
        mystring = mystring.replace(regex, "");
    }
    // 替换指定文本（修正循环遍历对象）
    for (let i=0; i<find3.length; i++){
        mystring = mystring.replace(find3[i], replace3[i]);
    }
        
    // 替换年份为<br>
    mystring = mystring.replace(find2, replace);
    
    // 合并连续的<br>及空白换行
    mystring = mystring.replace(/(&lt;br \/&gt;\s*)+/g, "&lt;br /&gt;");
    
    document.getElementById('result').innerHTML=mystring;
    console.log(mystring);
} 

关键说明 #

1. 修正了第二个for循环的遍历范围，避免无效循环
2. 在所有替换操作完成后执行正则合并逻辑，确保所有冗余<br>都被处理
3. 使用let声明循环变量i，避免全局变量污染

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