html <-> bbcode

HTML

<h3>HTML</h3>
<textarea id="input">
<h2>Title</h2>
<p><b><u>Hello</u> world.</b></p>
<p style="text-align: center;">The following text is <em>italic</em>.</p>
<p class="magic">This text is blue and right aligned</p>
<b>Test</b>
<p>This text is <span class="magic2">big with a yellow background</span>.</p>
<p class="magic3">This text is in Comic Sans font.</p>
<p><a href="https://google.com">Google</a></p>
<p><img src="https://i.imgur.com/iHQqtaG.png" /></p>
<ul>
	<li>Item 1</li>
	<li>
		Item 2
		<ul>
			<li>Item A</li>
			<li>Item B</li>
			<li>Item C</li>
		</ul>
	</li>
	<li>Item 3</li>
</ul>
<pre><code>var example2 = new jPopup({
	title: "&lt;h2&gt;Hello World!&lt;/h2&gt;",
	content: "&lt;p&gt;Sudo make me a sandwich?&lt;/p&gt;",
	buttons: [{
		text: "Sure",
		value: true
	}, {
		text: "Nope"
	}]
});</code></pre>
</textarea>
<br>
<br>
<h3>BBCode</h3>
<button id="encode">HTML to BBCode</button>
<textarea id="output"></textarea>
<br>
<br>
<h3>HTML</h3>
<button id="decode">BBCode to HTML</button>
<textarea id="html"></textarea>
<h3>HTML Preview</h3>
<div id="preview"></div>

CSS

.magic {
	color: blue;
	text-align: right;
}
.magic2 {
	font-size: 24px;
	background: yellow;
}
.magic3 {
	font-family: "Comic Sans MS", cursive, sans-serif;
}




/* Code that's not part of the example */
textarea {
	width: 100%;
	height: 500px;
	border: 0;
}
#preview {
	background: #fff;
	margin: 20px 0;
}

JavaScript

$("#encode").click(function() {
	var div = $("<div>");
	div.html($("#input").val());
	output = bbencode(div);
	$("#output").val(output);
});

$("#decode").click(function() {
	var output = $("#output").val()
	var html = bbdecode(output, true);
	$("#html").val(html);
	$("#preview").html(html);
});

function bbdecode(bbcode, paragraphs) {
	//BBCodes
	this.codes = {
		"h1": function(value) {
			return "<h1>" + value + "</h1>";
		},
		"h2": function(value) {
			return "<h2>" + value + "</h2>";
		},
		"h3": function(value) {
			return "<h3>" + value + "</h3>";
		},
		"h4": function(value) {
			return "<h2>" + value + "</h4>";
		},
		"h5": function(value) {
			return "<h2>" + value + "</h5>";
		},
		"h6": function(value) {
			return "<h2>" + value + "</h6>";
		},
		"br": function() {
			return "<br>";
		},
		"b": function(value) {
			return "<b>" + value + "</b>";
		},
		"i": function(value) {
			return "<i>" + value + "</i>";
		},
		"u": function(value) {
			return "<u>" + value + "</u>";
		},
		"s": function(value) {
			return "<s>" + value + "</s>";
		},
		"center": function(value) {
			return "<span style=\"text-align: center; display: block;\">" + value + "</span>";
		},
		"right": function(value) {
			return "<span style=\"text-align: right; display: block;\">" + value + "</span>";
		},
		"size": function(value, attribute) {
			return $("<span>").html(value).css("font-size", attribute + "px");
		},
		"font": function(value, attribute) {
			return $("<span>").html(value).css("font-family", attribute);
		},
		"color": function(value, attribute) {
			return $("<span>").html(value).css("color", attribute);
		},
		"highlight": function(value, attribute) {
			return $("<span>").html(value).css("background", attribute);
		},
		"url": function(value, attribute) {
			if(attribute) {
				return $("<a>").html(value).attr({"href": attribute, "target": "_blank"});
			}
			return $("<a>").html(value).attr({"href": value, "target": "_blank"});
		},
		"img": function(value)...