jQuery Convert Html To Text And Back

Question

If I were to have a text area on my webpage for users to input text, how would I convert that to show as html on button press and vice versa? I am looking for something like what wordpress would do when the user enters text and then converts it to html OR can write html and convert it to text.

I have tried a few pieces of code so far:

var text_only = $('.snippet').text();

This only displays the html without the tags, this does not render html as expected and the others aren't much better

amend: Please see link for better clarification - http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic_document

thanks

nick

Not really clear. Do you mean you want the exact text from the textarea to become HTML? or do you have tags like `[b]` etc? — Itay, Dec 23 '14 at 11:33
Yes, much like here: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic_document — Nicholas Mordecai, Dec 23 '14 at 11:35
Thanks @Itay is there anything specifically in iframes that I need to look in? — Nicholas Mordecai, Dec 23 '14 at 11:40
Not really. See at [this](http://stackoverflow.com/questions/139118/javascript-iframe-innerhtml) for example. Also, `text()` won't work for `textarea`, `val()` will — Itay, Dec 23 '14 at 11:43
@Itay suggest you delete that - the whole iframe thing is a red herring — Alnitak, Dec 23 '14 at 11:46
This is a non-trivial problem. If you allow the user to input real HTML then you can just copy it from the text area into an HTML element. However if you're wanting to use some sort of "markup" language then you'll need a full library to support that. — Alnitak, Dec 23 '14 at 11:47
Would I need a library to duplicate what w3schools have done or not because it is only HTML and no other markup language? @Alnitak — Nicholas Mordecai, Dec 23 '14 at 11:55
@Alnitak He'll need it if he wants to create something similar to w3fools — Itay, Dec 23 '14 at 11:59

StackExchange What The Heck · Accepted Answer · 2014-12-23T12:02:02.660

Do you mean something like this? http://jsfiddle.net/7crysb0L/2

js:

$('#dohtml').click(function() {

    var textAreaVal = $('#myTextArea').val();

    $('#myDiv').html(textAreaVal);

});

$('#dotext').click(function() {

    var textAreaVal = $('#myTextArea').val();

    $('#myDiv').text(textAreaVal);

});

html:

<textarea id="myTextArea" placeholder="Type here, then click the button to update the div"></textarea>
<br />

<button id="dohtml">Make HTML</button>
<button id="dotext">Make Text</button>
<div id="myDiv"></div>

This results in two buttons. Click "Make HTML: to populate myDiv with HTML from the textarea, and click "Make Text" - to treat the contents of the textarea as text and populate the div with the HTML tags visible.

It's worth noting that this is not code that should be used in its current state unless it's client side only, as it's very easy to insert unsafe values - e.g., try running the JS fiddle, insert </textarea><script>alert('lol')</script> into the textarea, then click 'Make HTML' to see why.... You don't want to save unsanitised rubbish like this to a back end somewhere, but if it's just for demo purposes it should be fine.

jQuery html api ref: http://api.jquery.com/html/

score 0 · Answer 2 · answered Dec 23 '14 at 11:43

0

var text_only = '&lt;div&gt;' + $('.snippet').text() + '&lt;/div&gt';

Here the fiddle: http://jsfiddle.net/p5hnttga/

answered Dec 23 '14 at 11:43

Michelangelo

5,888
5
31
50

jQuery Convert Html To Text And Back

2 Answers2