使用换行符 javascript 获取 textarea 值答案

【问题标题】：getting textarea value with newlines javascript使用换行符 javascript 获取 textarea 值
【发布时间】：2022-10-15 13:27:11
【问题描述】：

我有一个 HTML textarea，当输入数据时，当提交一个 js 函数时，它会从 textarea 中获取值并将它们放入一个段落中。但是 textarea 值之间有换行符，当函数采用这些值时，它会将它们放在段落中而没有换行符。即使在提交后有什么方法可以换行吗？

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div>
<textarea type="text" id="Question1" rows="5" cols="60">
-text number 1.
-text number 2.
-text number 3.
-text number 4.
</textarea><br />
<button onclick="getUserInput1();">submit</button><br />
</div>
<div>
<p>this is text in the textarea <span class="myId1"></span>.</p>
</div>
<script>
function getUserInput1() {
        var value1 = document.getElementById("Question1").value;
        var capita = document.getElementsByClassName("myId1");
        for (var i = 0; i < capita.length; i++) {  
            capita[i].innerHTML = value1 + " ";
        }
}
</script>
</body>
</html>

【问题讨论】：

只需将回车替换为休息资本[i].innerHTML = value1.replaceAll("\n","<br>") + " ";

标签： javascript textarea

【解决方案1】：

因为 HTML 中的 newline 是 <br />。您应该使用可以用正则表达式/ ? /gm 解析的换行符来分割字符串。使用g 表示全局标志，使用m 表示多行。

<div>
  <textarea type="text" id="Question1" rows="5" cols="60">
-text number 1.
-text number 2.
-text number 3.
-text number 4.
</textarea><br />
  <button onclick="getUserInput1();">submit</button><br />
</div>
<div>
  <p>this is text in the textarea <span class="myId1"></span>.</p>
</div>
<script>
  function getUserInput1() {
    var value1 = document.getElementById("Question1").value;
    var capita = document.getElementsByClassName("myId1");
    for (var i = 0; i < capita.length; i++) {
      capita[i].innerHTML = value1.split(/
?
/g).join('<br/>')
    }
  }
</script>

full example

【讨论】：

【解决方案2】：

它确实收集了新行，只有 HTML 将它们作为单个空格处理。这就是为什么我用新行<br>的html代码替换所有新行

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Document</title>
</head>

<body>
  <div>
    <textarea type="text" id="Question1" rows="5" cols="60">
-text number 1.
-text number 2.
-text number 3.
-text number 4.
</textarea><br />
    <button onclick="getUserInput1();">submit</button><br />
  </div>
  <div>
    <p>this is text in the textarea <span class="myId1"></span>.</p>
  </div>
  <script>
    function getUserInput1() {
      var value1 = document.getElementById("Question1").value.replace(/
/g, "<br>");
      var capita = document.getElementsByClassName("myId1");
      for (var i = 0; i < capita.length; i++) {
        capita[i].innerHTML = value1 + " ";
      }
    }
  </script>
</body>

</html>

【讨论】：