如何用JavaScript打乱文本行 解决诗句随机排序代码失效问题

你的代码无法运行是4个核心错误导致的：

• 拆分规则不匹配：原代码按换行符\r?\n拆分文本，但你的诗歌诗句是用<br>标签分隔的，文本里的换行只是排版用的空白，根本对应不上单句诗句，拆分出来的数组完全不符合预期。
• 非法的顶层return：return关键字只能在函数内部使用，直接在全局作用域写return会触发语法错误，整段JS会直接解析失败，根本不会执行。
• 没有回写DOM：就算代码完成了打乱逻辑，你没有把打乱后的内容重新赋值给诗歌容器的innerHTML，页面内容不会有任何变化。
• 执行时机错误：如果JS代码放在页面对应的<div id="text">之前，代码运行时DOM元素还没渲染完成，document.getElementById("text")会拿到null，直接抛错。

<!-- 诗歌容器 -->
<div id="text">
  Quand le ciel bas et lourd pèse comme un couvercle<br>
  Sur l'esprit gémissant en proie aux longs ennuis,<br>
  Et que de l'horizon embrassant tout le cercle<br>
  Il nous verse un jour noir plus triste que les nuits ;<br>
  Quand la terre est changée en un cachot humide,<br>
  Où l'Espérance, comme une chauve-souris,<br>
  S'en va battant les murs de son aile timide<br>
  Et se cognant la tête à des plafonds pourris ;<br>
  Quand la pluie étalant ses immenses traînées<br>
  D'une vaste prison imite les barreaux,<br>
  Et qu'un peuple muet d'infâmes araignées<br>
  Vient tendre ses filets au fond de nos cerveaux,<br>
  Des cloches tout à coup sautent avec furie<br>
  Et lancent vers le ciel un affreux hurlement,<br>
  Ainsi que des esprits errants et sans patrie<br>
  Qui se mettent à geindre opiniâtrement.<br>
  - Et de longs corbillards, sans tambours ni musique,<br>
  Défilent lentement dans mon âme ; l'Espoir,<br>
  Vaincu, pleure, et l'Angoisse atroce, despotique,<br>
  Sur mon crâne incliné plante son drapeau noir.<br>
</div>

<script>
// 等DOM完全加载后再执行逻辑，避免找不到元素
document.addEventListener('DOMContentLoaded', () => {
  const textContainer = document.getElementById("text");
  // 按<br>拆分诗句，过滤掉拆分后产生的空字符串
  const lines = textContainer.innerHTML.split(/<br\s*\/?>/).filter(line => line.trim() !== '');

  // Fisher–Yates 洗牌算法打乱数组
  for (let i = lines.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [lines[i], lines[j]] = [lines[j], lines[i]];
  }

  // 把打乱后的诗句拼接回<br>分隔的字符串，写回容器
  textContainer.innerHTML = lines.join("<br>");
})
</script>

• 代码拆分时用了正则<br\s*\/?>匹配所有形式的br标签，不管是<br>、<br/>还是<br />都能正常识别
• 加了filter逻辑过滤空内容，避免打乱后出现多余的空行
• 用DOMContentLoaded事件监听保证DOM加载完成后再执行逻辑，不管你把JS放在页面头部还是底部都能正常运行
• 每次页面刷新都会重新执行洗牌逻辑，诗句顺序会随机变化

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