如何解决数组插入<br>后HTML邮件显示异常的问题？

我有一个元素数组，想在每个元素后插入<br>标签来生成HTML格式的邮件，代码如下：

arr = ['one', 'two', 'three'];
var separator = '<br>'
arr = arr.join(separator)

在HTML中引用该数组的代码为：

<p> arr </p>

但实际输出结果为one"Br"two"Br"three，该如何修复？

1. 修正变量插值方式 #

直接在HTML里写<p> arr </p>会把arr当成普通字符串输出，而非变量的实际值。需根据运行环境正确插入变量：

• 前端JavaScript场景：

  const arr = ['one', 'two', 'three'];
  const separator = '<br>';
  const content = arr.join(separator);
  // 通过innerHTML渲染HTML标签，而非纯文本
  document.getElementById('email-content').innerHTML = `<p>${content}</p>`;
  

  对应的HTML结构：

  <p id="email-content"></p>
  

• 后端生成邮件内容场景（如Node.js）：

  const arr = ['one', 'two', 'three'];
  const separator = '<br>';
  // 直接拼接成HTML字符串，供邮件客户端解析
  const emailHtml = `<p>${arr.join(separator)}</p>`;
  

2. 移除不必要的HTML转义 #

你代码里的separator = '<br>'是转义后的<br>，若渲染环境再次转义，就会出现"Br"这类实体字符。直接使用原始的<br>作为分隔符，确保渲染引擎识别为HTML标签而非普通文本。

3. 确保邮件客户端以HTML格式解析 #

生成邮件时，需将邮件的Content-Type设置为text/html，否则客户端会把所有内容当成纯文本，<br>标签会被原样输出而非解析为换行。

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