Copy a textarea value into a div keeping line breaks and html as text

Question

I am working on trying to get a way for whatever is in a textarea to move over to a div on a button click. Some of the key features that i am looking for is that i want linebreaks to stay and that if a user inputs any kind of html tags, it will cross over shown the same way.

So something like this that is entered:

<body>
    <p>blah blah blah</p>
    <p>more text</p>
</body>

will still look the same in the div area.

I have tried a couple of things, but most recently I have tried this:

var value = $('#selector-input textarea').val().replace(/\n/g, '<br/>');
$('#selector-canvas #canvas').text(value);

Does anyone have any ideas? Any help would be much appreciated. Thanks!

http://stackoverflow.com/questions/7467840/nl2br-equivalent-in-javascript — Canser Yanbakan, Jun 09 '14 at 12:56
@JayBlanchard - Sorry, had full intentions to do so. I guess i jumped the gun to get my question out there. One second.. — scapegoat17, Jun 09 '14 at 13:00
@R.CanserYanbakan - This does not seem to work for me though. using that code does not leave the HTML as visible it just shows how it would be rendered on the page — scapegoat17, Jun 09 '14 at 13:14

score 5 · Accepted Answer · answered Jun 09 '14 at 13:14

5

If you want to preserve the tags you have to replace the angle brackets first, followed by replacing the newline characters - http://jsfiddle.net/jayblanchard/2Kg9F/

var value = $('textarea').val()
    .replace(/</g, '&lt;')
    .replace(/>/g,'&gt;')
    .replace(/\n/g, '<br/>');

answered Jun 09 '14 at 13:14

Jay Blanchard

34,243
16
77
119

1

Working like charm for me, after 7 days finally i got the right answer to my problem ^_^ – Moxet Jan Mar 01 '15 at 09:13

Copy a textarea value into a div keeping line breaks and html as text

1 Answers1

Linked