admin管理员组

文章数量:1416080

I have a text area, a button and a div

<textarea type="text" id="mytext"></textarea>
<button onclick="test()">Click Me</button>
<div id="here"></div>

Here is the script

<script>
    function test() {
        var b = document.getElementById('mytext').value;
        document.getElementById('here').innerHTML = b;
    }
</script>

I wrote following text in text area:

Hello All
Good Morning

But when i pressed Click Me, it gives following text in div element:

Hello All Good Morning

How to show multiple lines as in textarea? Thanks

I have a text area, a button and a div

<textarea type="text" id="mytext"></textarea>
<button onclick="test()">Click Me</button>
<div id="here"></div>

Here is the script

<script>
    function test() {
        var b = document.getElementById('mytext').value;
        document.getElementById('here').innerHTML = b;
    }
</script>

I wrote following text in text area:

Hello All
Good Morning

But when i pressed Click Me, it gives following text in div element:

Hello All Good Morning

How to show multiple lines as in textarea? Thanks

  • javascript
  • html
Share Improve this question edited Jan 24, 2018 at 11:03 Yasir Mushtaq asked Jan 24, 2018 at 10:58 Yasir MushtaqYasir Mushtaq 1781 silver badge13 bronze badges
Add a ment  | 

5 Answers 5

Reset to default 2

just use replace(/(?:\r\n|\r|\n)/g, '<br />'); to replace all line breaks in a string with <br /> tag like:

function test() {
        var b = document.getElementById('mytext').value;
        b = b.replace(/(?:\r\n|\r|\n)/g, '<br />');
        document.getElementById('here').innerHTML = b;
    }
<textarea type="text" id="mytext"></textarea>
<button onclick="test()">Click Me</button>
<div id="here"></div>

You have to replace the new line with br tag.

Example Code

    <!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<textarea type="text" id="mytext"></textarea>
<button onclick="test()">Click Me</button>
<div id="here"></div>

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

You should replace new line characters with <br> tag.

function test() {
  var b = document.getElementById('mytext').value;
  document.getElementById('here').innerHTML = b.replace(/\n\r?/g, '<br>');
}
<textarea type="text" id="mytext"></textarea>
<button onclick="test()">Click Me</button>
<div id="here"></div>

Fixing text area and div size with br replace is giving effective result.

function test() {
  var b = document.getElementById('mytext').value;
  document.getElementById('here').innerHTML = b.replace(/\n\r?/g, '<br>');
}
#here {
  width: 100px;
  height: 100px;
  word-wrap: break-word;
}

#mytext {
  width: 100px;
  height: 100px;
}
<textarea type="text" id="mytext"></textarea>
<button onclick="test()">Click Me</button>
<div id="here"></div>

https://www.w3schools./jsref/jsref_split.asp

Example Split a string into an array of substrings:

var str = "How are you doing today?";
var res = str.split(" ");
//The result of res will be an array with the values:

Output: How,are,you,doing,today?

本文标签： javascriptShowing multiple lines textarea value in an div elemtent using jsStack Overflow

版权声明：本文标题：javascript - Showing multiple lines textarea value in an div elemtent using js - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745244428a2649490.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。