Question

我的问题是，

当我在TextArea中输入多行时，我得到像这样的输出，

upper one is input and lower one is output

但我希望得到这样的输出，

在这张照片中，我使用<br/>只是为了看看我想要的但是，在真实中我不想使用<br/>在多行中断线

这是代码I＆＃39; m使用...

<!DOCTYPE html>
<html>
  <head>
  </head>
<body>
  <TextArea id = "Input" onKeyupUp = "showResult()" style = "height: 100px; width: 100%; resize: none;"> </TextArea>
  <Div id = "output" ></Div>
</body>

<script>
  function showResult(){
    var input = document.getElementById("Input").value;
      document.getElementById("Output").innerHTML = input;
  }
</script>
</html>

Answer 1

textarea使用文字格式的换行符，例如\n或\r或\r\n。因此，将任何这些转换为HTML换行符的简单正则表达式：<br />将解决您的问题。

var inputHTML = input.replace(/\r\n|\r|\n/g, "<br />");

＆＃13;

function showResult() {
  var input = document.getElementById("Input").value;
  var inputHTML = input.replace(/\r\n|\r|\n/g, "<br />");
  document.getElementById("output").innerHTML = inputHTML;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <TextArea id="Input" onKeyupUp="showResult()" style="height: 100px; width: 100%; resize: none;"></TextArea>
  <Div id="output"></Div>
  <button onclick="showResult()">SHOW</button>
</body>

</html>

＆＃13;

Answer 2

为输出尝试PHP函数nl2br（）

HTML - 从TextArea获取输入时断行

2 个答案: