MongoDB含 文本前端换行异常，forEach仅展示最后项求解

嘿，我看你遇到了两个小问题：一是前端只显示forEach循环的最后一个值，二是MongoDB里带换行的文本没法在前端正常展示。咱们一步步来搞定：

为什么只显示最后一项？ #

你当前的script.js里犯了个常见小错误：每次循环都用descriptionFraze.html('<li>'+ paragraph + '</li> <br>')，html()方法会清空ul里所有现有内容，然后设置新的li元素。之后再append这个刚设置的内容，相当于每次循环都把之前的内容覆盖掉，最后自然只剩最后一个段落了。

修复方案一：修正JS逻辑，保留所有项并处理换行 #

直接修改你的script.js，把覆盖内容的操作改成逐个追加，或者先清空再批量添加：

let data = $('.data'); 
data.hide(); 
let descriptionFraze = $('.dFraze'); 

if (data.length > 0 ) { 
  // 提取原始文本，把各种换行符替换成<br>（也可以换成你需要的分隔符）
  let str = data.text().replace(/(?:\r\n|\r|\n)/g, '<br />'); 
  let newData = str.split('<br />'); 

  // 先清空ul，避免和模板里生成的旧li重复
  descriptionFraze.empty();
  
  // 逐个追加每个段落到ul里
  newData.forEach((paragraph)=>{ 
    console.log(paragraph); 
    // 用append直接添加新的li，不会覆盖已有内容
    descriptionFraze.append('<li>'+ paragraph + '</li>'); 
  }); 
}

修复方案二：直接在EJS模板里处理（更高效） #

其实你可以不用等到前端JS再处理，直接在EJS模板里就把换行转成<br>，同时模板本身的forEach就能生成所有li，根本不会出现只显示最后一项的问题：

<ul class="dFraze"> 
  <% service.description.forEach(function (description) { %> 
    <!-- 用<%-而非<%=，避免HTML标签被转义 -->
    <li class="data"><%- description.description_fraze.replace(/(?:\r\n|\r|\n)/g, '<br>') %></li> 
  <% }) %>
</ul>

额外优化：用CSS实现换行（更语义化） #

如果不想替换成<br>标签，也可以给li加个CSS样式，让浏览器自动识别文本里的换行符：

.data {
  white-space: pre-line;
}

这样模板里直接输出原始文本就行，不需要做任何字符替换，浏览器会自动把换行符转换成换行显示：

<ul class="dFraze"> 
  <% service.description.forEach(function (description) { %> 
    <li class="data"><%= description.description_fraze %></li> 
  <% }) %>
</ul>

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