根据keyCode将文本区域拆分为数组，并为每一行添加li标签 - JavaScript

Question

我是 JavaScript 的新手，所以很难通过这条线。我有一个带有 textarea 字段的表单。在回车键的每个按键事件之后，我需要将每一行都包裹在 li 标签中。然后一旦提交，数据将作为列表输出。我使用的是 Javascript 而不是 JQuery。问题是，当我添加 li 标签时，开始标签总是添加到第一项，最终有多个开始 li 标签，结束标签正常工作。

到目前为止我已经试过了。 HTML

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

JS

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

  // If the user has pressed enter
  if (key === 13) {

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

    return false
  } else {
    return true
  }
}

这是文本区域内的输出

<li><li><li>One</li>,two</li>Three,</li>

Answer 1

因此，现有代码的主要问题是，当您将值添加回 textarea 时，您将数组（lines 变量）包装在打开和关闭的 <li> 标记内，而不是将每一行包装在里面自己的标签。

此外，在添加回值时，我假设您也想保留这些行（意味着每个 <li> 也在其自己的行上），在这种情况下，您还需要在每行之后添加回换行符。

最后，为了防止添加重复的 <li> 标签，最简单的方法是删除标签并再次解析文本区域的值（这也可以防止编辑前几行时出现问题）。

const addLiTag = e => {
  let lines = document.querySelector("#form__comments").value.replaceAll("<li>", "").replaceAll("</li>", "").split(/
?
/)

  if(e.keyCode === 13) document.querySelector("#form__comments").value = "<li>" + lines.join("</li>
<li>") + "</li>"
}

document.querySelector("#form__comments").addEventListener("keypress", addLiTag)

<textarea id="form__comments" name="comments" class="form__comments" rows="10"></textarea>

笔记

我确信这也可以通过在换行符或 </li> <li> 定界符上拆分的单个正则表达式来完成，而不是使用两个 .replaceAll() 调用，但是我在正则表达式方面并不是那么出色。但希望这个答案展示了删除所有 <li> 标签并每次重新解析值的概念。