JavaScript动态插入随机生成文本时如何添加换行符

你当前的代码用innerText给元素赋值，只要注意换行符规则和对应CSS配置，就能实现换行效果，以下是对应你场景的具体方案：

核心规则先明确 #

• 用innerText赋值时，换行用转义字符\n即可识别
• HTML默认会把文本里的换行符折叠为普通空格，必须给目标元素加对应CSS样式才能让换行视觉生效
• 如果后续改用innerHTML赋值，换行需要用HTML标签<br>，不需要额外CSS，但不要把不可信的外部内容直接通过innerHTML插入，避免安全问题

适配你当前代码的两种场景实现 #

场景1：单个随机字符串内部需要换行 #

直接在你定义的数组成员里需要换行的位置加\n即可，原有赋值逻辑不需要改动：

var textArray = [
    'Gateway to\nwild imaginations!', // \n标记的位置会显示为换行
    'Activating\nthe send portal :D',
    'Empowering\nnothing ;P'
];
var randomNumber = Math.floor(Math.random()*textArray.length);
var rndStr = textArray[randomNumber];

const h_1_elem = document.getElementById('main-h1');
h_1_elem.innerText = rndStr;

给目标h1元素加如下CSS样式，让换行正常显示：

#main-h1 {
  /* 保留文本换行，同时会自动忽略多余的空白缩进 */
  white-space: pre-line;
}

场景2：同时插入多个随机字符串，字符串之间换行 #

如果你需要一次抽取多个字符串放到h1里，每个字符串单独占一行，用\n拼接所有选中的字符串再赋值即可：

var textArray = [
    'Gateway to wild imaginations!',
    'Activating the send portal :D',
    'Empowering nothing ;P'
];

// 示例：随机抽取2个不重复的文本
const selectedText = [];
const tempArray = [...textArray]; // 拷贝原数组避免修改原数据
for(let i = 0; i < 2; i++) {
  const randomIndex = Math.floor(Math.random() * tempArray.length);
  selectedText.push(tempArray.splice(randomIndex, 1)[0]);
}

const h_1_elem = document.getElementById('main-h1');
// 用换行符拼接所有选中文本
h_1_elem.innerText = selectedText.join('\n');

同样需要加上前面提到的white-space: pre-line样式即可生效。

常见踩坑 #

• 不要在innerText中使用<br>做换行，innerText不会解析HTML标签，会把<br>直接当成普通文字显示
• 忘记加white-space相关CSS是90%新手写了换行符但页面不换行的原因

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