使用Javascript实现textarea内容按换行拆分 每段加首行缩进并包裹p标签

你的代码核心问题是循环过程中每次都直接给textarea.value赋值，直接覆盖上一次循环的结果，最终只能保留最后一段的处理结果。同时text-indent样式加在textarea元素上不会作用于你生成的<p>标签，需要直接写到p标签的行内样式中。

方案1：处理后结果直接输出到textarea（显示HTML源码） #

修正后的JS代码： #

function splits() {
  let textarea = document.getElementsByTagName("textarea")[0]
  let arrays = textarea.value.split(/\r?\n/)
  // 新增变量存储所有拼接后的段落
  let output = ''
  for (let i = 0; i < arrays.length; i++) {
    // 过滤空行，不需要可以删除这个判断
    if (arrays[i].trim() === '') continue
    // 把当前段落拼接到output后，首行缩进样式加在p标签上
    output += "<p style='text-indent:10px'>" + arrays[i] + "</p>"
  }
  // 循环结束后一次性赋值给textarea
  textarea.value = output
}

HTML代码无需修改。

方案2：处理后结果渲染为可见段落（不显示HTML源码） #

如果需要直接在页面上展示带首行缩进的段落效果，新增一个渲染容器即可：

HTML代码： #

<textarea></textarea>
<button onclick=splits()>Splits</button>
<!-- 新增段落渲染容器 -->
<div id="paraContainer"></div>

修正后的JS代码： #

function splits() {
  let textarea = document.getElementsByTagName("textarea")[0]
  let paraContainer = document.getElementById('paraContainer')
  let arrays = textarea.value.split(/\r?\n/)
  let output = ''
  for (let i = 0; i < arrays.length; i++) {
    if (arrays[i].trim() === '') continue
    output += "<p style='text-indent:10px'>" + arrays[i] + "</p>"
  }
  // 渲染到容器中
  paraContainer.innerHTML = output
}

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