jQuery中textarea失焦替换换行为<br>时重复添加标签的问题求助

嘿，我来帮你搞定这个问题！你的代码现在遇到的核心问题是每次失焦都在父元素里追加内容，而不是替换已有内容，再加上没有处理textarea的重复触发逻辑，导致每次失焦都会多生成一堆<br>标签。

先拆解你原代码里的问题点：

1. 使用append()方法：这个方法会把新内容加到父元素的末尾，而不是替换掉之前已经生成的内容，所以第一次失焦加了处理后的文本，第二次失焦又会再加一遍，自然就重复了。
2. 变量未声明：$target没有用const/let声明，会变成全局变量，这是个潜在的bug。
3. 换行符的正则写法：你写的/ /g是无效的，应该用/\n/g来匹配换行符。
4. <br>标签写法：HTML里标准的换行标签是<br>或者<br/>，</br>是错误的写法哦。

接下来给你几个针对性的解决方案，你可以根据需求选择：

方案1：保留textarea，每次更新显示内容（不重复追加） #

如果需要让用户可以反复编辑textarea，同时在父元素里实时更新处理后的内容，你可以给父元素加一个专门的显示容器，每次失焦时替换这个容器的内容，而不是追加：

<!-- 先给父元素加一个显示容器 -->
<div class="myDiv">
  <div class="textarea-wrapper">
    <textarea></textarea>
    <div class="display-content"></div>
  </div>
</div>

$('.myDiv').on('focusout', '* > textarea', function(e) { 
  // 用const声明变量，避免全局污染
  const $target = $(e.target); 
  // 正确匹配换行符，替换成标准<br>标签
  const processedText = $target.val().replace(/\n/g, '<br>');
  // 替换显示容器的内容，而不是追加
  $target.parent().find('.display-content').html(processedText);
});

方案2：失焦后替换textarea为处理后的文本（禁止重复编辑） #

如果用户编辑完失焦后，不需要再修改这段内容，那可以直接把textarea替换成处理后的HTML元素，这样就不会再触发focusout事件了：

$('.myDiv').on('focusout', '* > textarea', function(e) { 
  const $target = $(e.target); 
  const processedText = $target.val().replace(/\n/g, '<br>');
  // 把textarea替换成带处理后内容的div
  $target.replaceWith(`<div class="processed-text">${processedText}</div>`);
});

方案3：清空父元素后重新添加（适合父元素只有textarea和处理内容的场景） #

如果你不想额外加显示容器，也可以每次失焦时先清空父元素，再重新添加textarea和处理后的内容（注意要保留textarea的当前值）：

$('.myDiv').on('focusout', '* > textarea', function(e) { 
  const $target = $(e.target); 
  const textVal = $target.val();
  const processedText = textVal.replace(/\n/g, '<br>');
  
  // 清空父元素，然后重新添加textarea和处理后的内容
  $target.parent().empty()
          .append($target) // 把textarea放回去
          .append(processedText);
});

这样修改后，就不会再出现重复添加<br>标签的问题啦！

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