时间戳

首页 > 解决方案 > 如何使用javascript打印textarea中的每一行？

javascript - 如何使用javascript打印textarea中的每一行？

问题描述

我想在 my 中显示 textarea 的值，在 textarea 中div #result保留换行符并1在每行的末尾添加。

这是我到目前为止所尝试的。它只添加1到最后一行。

<!DOCTYPE html>
<html>
<head>
    <title>Hello World !</title>
</head>
<body>
<textarea rows="10" id="mytext"></textarea>
<button onclick="test()">Click Me</button>
<div id="result"></div>

</body>
<script type="text/javascript">
  function test() {
  var b = document.getElementById('mytext').value+1;
  document.getElementById('result').innerHTML = b.replace(/\n\r?/g, '<br>');
}
</script>
</html>

标签： javascripthtml

解决方案

您以前的方法不起作用，因为您要添加1值然后按换行符拆分。

相反，用换行符 ( \n) 拆分值，然后循环遍历每个项目，连接并插入结果的 innerHTML。

const result = document.getElementById("result");

function test() {
  result.innerHTML = "";
  document.getElementById('mytext').value
    .split("\n")
    .forEach(e => result.innerHTML += e + "1" + "<br>")
}
<!DOCTYPE html>
<html>

<head>
  <title>Hello World !</title>
</head>

<body>
  <textarea rows="10" id="mytext"></textarea>
  <button onclick="test()">Click Me</button>
  <div id="result"></div>

</body>

</html>

推荐阅读