如何拆分后端加载的整合代码为两行显示？已尝试方案无效求建议

问题分析 #

你当前的问题是后端返回的嵌入代码字符串没有换行，导致在<pre><code>中显示为一行。你之前写的JS代码是操作页面上的#bot元素的显示状态，和代码块的换行需求完全不相关，所以无效。

解决方案 #

方案一：后端修改（推荐） #

直接在后端生成data.website_code_integration内容时，在</script>标签后添加换行符\n，比如返回的字符串改为：

<script src="127.0.0.1:5000/bot.js" api-key="xxx"></script>\n<div id="bot"></div>

这样前端渲染到<pre><code>中时，会自动解析换行符显示为两行。

方案二：前端JS处理 #

如果无法修改后端，可通过前端JS替换字符串中的标签衔接处，插入换行：

window.addEventListener('DOMContentLoaded', () => {
  // 定位到展示代码的code元素
  const codeEl = document.querySelector('td pre code');
  if (codeEl) {
    // 替换</script>和<div>的衔接处，加入换行
    const formattedContent = codeEl.textContent.replace('</script><div', '</script>\n<div');
    codeEl.textContent = formattedContent;
  }
});

这段代码会在页面加载完成后，找到对应的代码元素，将连在一起的标签拆分成两行显示。

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