Tool-html swaped and joined to string

html swaped to string string unswaped to html

by JSDavi

HTML

<button id="btn-htos" class="check-item checked">
<h3>Tools: HTML to Joined-String</h3>
</button>
<button id="btn-stoh" class="check-item">
<h3>Tools: Joined-String to HTML</h3>
</button>

<div id="htmlToString">
    <fieldset>
        <legend>Input(HTML):</legend>
        <textarea id="input-content-html"></textarea>
    </fieldset>

    <button id="htos">Convert</button>
    <fieldset>
        <legend>Output(Joined-String):</legend>
        <textarea id="ouput-content-string">
        </textarea>
    </fieldset>
</div>
<div id="stringToHtml" class="hide">
	<fieldset>
    <legend>Input(Joined-String):</legend>
    <textarea id="input-content-string"></textarea>
</fieldset>

<button id="stoh">Convert</button>
<fieldset>
    <legend>Output(HTML):</legend>
    <textarea id="ouput-content-html">
    </textarea>
</fieldset>
</div>

CSS

.check-item {
	float: left;
	width:50%;
	background-color: gray;
	border-radius: 2px;
	color: #fff;
}
.check-item.checked {
	background-color: #406AD5;
}
#htmlToString.hide,
#stringToHtml.hide{
	display: none;
}
textarea {
    width: 100%;
    height: 100px;
}

JavaScript

$(function() {
	$('.check-item').bind('click', checkClick);
    $('#htos').bind('click', htmlToString);
	$('#stoh').bind('click', stringToHtml);
});
function checkClick(){
	$('#btn-htos').toggleClass('checked');
	$('#btn-stoh').toggleClass('checked');
	$('#htmlToString').toggleClass('hide');
	$('#stringToHtml').toggleClass('hide');
}
function htmlToString() {
    var sourceHtml = $('#input-content-html').val();
    var resultString = sourceHtml.replace(/(^\s*)/g, "'")
        .replace(/(\s*$)/g, "'")
        .replace(/(\s*)(\n+)\s*/g, "'+\n'")
        .replace("''", "'");
    if (sourceHtml == '') {
        resultString = '';
    }
    $('#ouput-content-string').val(resultString);
}
function stringToHtml() {
    var sourceHtml = $('#input-content-string').val();
    var resultString = sourceHtml.replace(/(('|")\+\s*)(\n+)\s*('|")/g, "\n")
	.replace(/(^('|")<)/g, "<")
	.replace(/(>('|")$)/g, ">");
    if (sourceHtml == '') {
        resultString = '';
    }
    $('#ouput-content-html').val(resultString);
}