按回车键将textarea内容拆分为数组并包裹<li>标签的JavaScript问题

我是JavaScript新手，现在实现功能时遇到了麻烦。我有一个带textarea字段的表单，需要用户每次按下回车键后，把每行内容包裹在<li>标签里，提交后以列表形式输出数据。我用的是原生JavaScript，没有用jQuery。现在的问题是添加<li>标签时，起始标签总是重复加到第一项上，导致出现多个<li>起始标签，但闭合标签是正常的。

我目前尝试的代码如下：

HTML代码 #

<textarea id="form__comments" name="comments" class="form__comments" rows="10" onkeypress="addLiTag(event);"></textarea>

JavaScript代码 #

function addLiTag(e) {
  const commentValue = document.getElementById("form__comments").value
  var lines = commentValue.split(/\r?\n/)
  var key = e.keyCode

  // 如果用户按下回车键
  if (key === 13) {

    document.getElementById("form__comments").value = "<li>" + lines + "</li>"

    return false
  } else {
    return true
  }
}

当前textarea内的错误输出：
<li><li><li>One</li>,two</li>Three,</li>

问题根源 #

你现在的代码每次按下回车时，都会把整个文本内容拆分成行，然后直接在最前面加一个<li>，再把数组用逗号拼接后加</li>。但之前的行已经被包裹过<li>了，所以重复操作就会导致起始标签叠加。而且数组直接转字符串会用逗号分隔，这也不是你想要的效果。

修正后的实时处理代码 #

function addLiTag(e) {
  const textarea = document.getElementById("form__comments");
  const key = e.keyCode;

  if (key === 13) {
    e.preventDefault(); // 阻止默认换行行为，避免多余空行
    
    // 拆分现有内容为行，过滤空行（可选，不需要可删除filter部分）
    let lines = textarea.value.split(/\r?\n/).filter(line => line.trim() !== "");
    
    // 给每一行单独包裹<li>标签，再用换行符拼接还原格式
    let formattedLines = lines.map(line => `<li>${line}</li>`).join("\n");
    
    // 更新textarea内容
    textarea.value = formattedLines;
  }
}

代码说明 #

1. 阻止默认行为：用e.preventDefault()替代return false，更规范地阻止回车的默认换行操作，避免内容里多出空行。
2. 逐行处理：用map方法给每一行单独包裹<li>，不管之前有没有标签，每一行都会被正确处理，不会出现起始标签重复叠加的问题。
3. 格式还原：用join("\n")把处理后的行重新拼接成带换行的文本，保持textarea内的内容排版清晰。

更优方案：提交时再处理 #

如果你的核心需求是提交后输出列表，其实更推荐不在textarea里实时修改内容，而是在表单提交时再转换格式，这样用户输入体验更自然，也不会出现实时修改内容的干扰。示例代码如下：

// 假设表单id为form__main，输出列表的容器id为output-list
document.getElementById("form__main").addEventListener("submit", function(e) {
  e.preventDefault();
  const textarea = document.getElementById("form__comments");
  // 拆分内容并过滤空行
  const lines = textarea.value.split(/\r?\n/).filter(line => line.trim() !== "");
  // 生成列表HTML
  const listHtml = lines.map(line => `<li>${line}</li>`).join("");
  
  // 将列表插入页面（或提交到后端）
  document.getElementById("output-list").innerHTML = `<ul>${listHtml}</ul>`;
});

这样用户输入时就是正常的文本换行，提交后再生成规范的列表，逻辑更清晰。

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