如何用JavaScript识别文本段落并生成<p>标签适配Django网站？

Django的{{ text|linebreaks }}核心逻辑是：单个换行转<br>，两个及以上连续换行分割成<p>包裹的段落，用JavaScript实现完全可以复刻这个逻辑，直接看代码和步骤：

1. 核心处理函数 #

先写两个基础函数，分别负责分割段落和处理段落内的换行：

// 分割文本为段落数组（匹配2个及以上连续换行）
function splitIntoParagraphs(text) {
  // 按连续换行分割，同时过滤掉空段落（比如开头/结尾的空行）
  return text.split(/\n{2,}/).filter(para => para.trim() !== '');
}

// 处理单个段落内的换行（转成<br>）
function formatSingleParagraph(para) {
  return para.replace(/\n/g, '<br>');
}

2. 生成完整HTML结构 #

把上面两个函数结合，直接输出带<p>标签的HTML：

function renderTextToHtml(text) {
  const paragraphs = splitIntoParagraphs(text);
  // 给每个段落套<p>标签，再拼接成完整字符串
  return paragraphs.map(para => `<p>${formatSingleParagraph(para)}</p>`).join('');
}

3. 结合Fetch请求使用 #

拿到编辑后的响应文本后，调用上面的函数生成HTML，再插入页面，还能加平滑过渡：

// 示例Fetch请求（适配Django的CSRF要求）
fetch('/your-edit-api/', {
  method: 'POST',
  body: new FormData(document.getElementById('edit-form')),
  headers: {
    'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
  }
})
.then(res => res.text())
.then(editedText => {
  const contentBox = document.getElementById('target-content');
  // 先加过渡动画的前置状态（比如透明）
  contentBox.style.opacity = '0';
  // 等待动画帧更新内容
  requestAnimationFrame(() => {
    contentBox.innerHTML = renderTextToHtml(editedText);
    contentBox.style.opacity = '1';
  });
});

4. 平滑过渡的CSS配合 #

给目标容器加简单的过渡动画：

#target-content {
  opacity: 1;
  transition: opacity 0.3s ease;
}

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