jQuery - How to format readable HTML syntax?

Question

I want to generate HTML code. The result is injected into a textarea. Afterwards a user can simply copy the result code. My problem is that the generated HTML code has no tabs and linebreaks, making it hard to read.

js fiddle

I want it to look like that:

HTML

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Check out [this SO question, Simple HTML Pretty Print](http://stackoverflow.com/questions/8348545/simple-html-pretty-print) — rwisch45, May 02 '14 at 20:39

score 1 · Answer 1 · answered May 02 '14 at 20:33

1

You can't. That would take HTML to format, and HTML does not render inside of a textarea. If you want formatting, ditch the textarea and use something else.

Edit: I lied. You just have to insert line breaks \n where you want a new line.

answered May 02 '14 at 20:33

Sterling Archer

22,070
18
81
118

score 1 · Answer 2 · answered May 02 '14 at 20:36

1

You can't add tabs, but you can use \n after each line for line breaks and you can simulate tabs with (two or four) spaces.

answered May 02 '14 at 20:36

AstroCB

12,337
20
57
73

score 1 · Accepted Answer · answered May 02 '14 at 20:36

1

Just add a \n to the end of each line:

http://jsfiddle.net/9NCvd/3/

Note: You can add tabs. just use \t

answered May 02 '14 at 20:36

Anthony

806
7
14

I dont like this answer because it is something that is not programatic, therefore would not work if i pasted html into the text area. This is why im giving you a downvote. I am under the assumption that the user doesnt just want to have "textarea" obtain a value, but have the ability to paste html into it for some sort of line breaking tool, like how jsfiddle formatter might do. – Fallenreaper May 02 '14 at 20:53

score 0 · Answer 4 · answered May 02 '14 at 20:48

I think you are trying to do something like: http://jsfiddle.net/hvuLU/

there is a decode function i created.

function myDecode(s){
  return s.replace(/\&lt;/g,"<").replace(/\&gt;/g,">");
}

This here, would allow you to do something like:

Paste into textbox to render in a box below it. Sort of how Stackoverflow has its textarea and then the render area.

jQuery - How to format readable HTML syntax?

4 Answers4