JavaScript：为数组字符串添加换行符

嘿，我知道你遇到的问题了——用textContent的时候，不管是\n还是<br>都没办法正常显示换行，对吧？这是因为textContent会把所有内容都当作纯文本处理，不会解析HTML标签，也不会把\n渲染成页面上的换行。下面给你几个可行的解决办法：

方法1：改用innerHTML解析HTML换行标签 #

如果你想用<br>来实现换行，只需要把原本的textContent换成innerHTML就行，它会自动解析HTML标签。修改后的代码如下：

const p = document.getElementById("sentences");
const origSentences = [
  "This is the first<br>sentence.", 
  "This is the second sentence.", 
  "This is the third sentence."
];
let remainingSentences = [];

function randomSentence() {
  if (remainingSentences.length === 0)
    remainingSentences = origSentences.slice();
  const { length } = remainingSentences;
  const [quote] = remainingSentences.splice(Math.floor(Math.random() * length), 1);
  p.innerHTML = quote; // 替换为innerHTML解析HTML标签
}

对应的HTML部分无需修改：

<p><button onclick="randomSentence()" type="button">Random Sentence</button></p>
<p id="sentences"></p>

方法2：保留textContent，用CSS让\n生效 #

如果你不想用HTML标签，想用\n来写换行，可以给目标<p>元素添加CSS样式，让它识别文本里的换行符。具体操作：

首先修改句子数组，加入\n：

const origSentences = [
  "This is the first\n sentence.", 
  "This is the second sentence.", 
  "This is the third sentence."
];

然后给#sentences元素添加CSS：

#sentences {
  white-space: pre-wrap; /* pre-wrap会自动适配容器宽度换行，pre则严格保留原始文本格式 */
}

JS部分继续使用textContent即可：

p.textContent = quote;

方法3：手动创建文本节点和换行元素（更灵活） #

如果需要更精细地控制内容（比如给部分文本加样式），可以把句子拆分成多个部分，逐个创建文本节点和<br>元素插入到<p>中。示例：

const p = document.getElementById("sentences");
const origSentences = [
  "This is the first|sentence.", 
  "This is the second sentence.", 
  "This is the third sentence."
];
let remainingSentences = [];

function randomSentence() {
  if (remainingSentences.length === 0)
    remainingSentences = origSentences.slice();
  const { length } = remainingSentences;
  const [quote] = remainingSentences.splice(Math.floor(Math.random() * length), 1);
  
  // 清空容器原有内容
  p.innerHTML = "";
  // 用自定义分隔符分割句子（这里用|，你可以换成任意标识）
  const parts = quote.split("|");
  parts.forEach((part, index) => {
    p.appendChild(document.createTextNode(part));
    // 不是最后一部分就添加换行元素
    if (index !== parts.length - 1) {
      p.appendChild(document.createElement("br"));
    }
  });
}

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