syxc/htmltojade.js

## htmltojade.js
/*global $*/
(function () {
    'use strict';

    var $html = $('#html'),
        $convert = $('#convert'),
        $jade = $('#jade');

    function normalizeLineBreaks(str) {
        return str.replace(/(\r\n|\n|\r)/gm, '\n');
    }

    function trimWhitespace(str) {
        return str.replace(/\s+/g, ' ');
    }

    function hasText(el) {
        var i,
            children = el.childNodes,
            childrenLen = children.length;

        for (i = 0; i < childrenLen; i += 1) {
            if (children[i].nodeType === 3 && children[i].nodeValue.trim()) {
                return true;
            }
        }

        return false;
    }

    function convert(el, indentLevel) {

        var jade = [],
            children = el.childNodes,
            childrenLen = children.length,
            attributes = el.attributes,
            attributesLength = attributes.length,
            i,
            j,
            attrKeyVals = [],
            attrName,
            child,
            childValue,
            hasTextNodes = hasText(el),
            indentArr = [],
            indentStr,
            lines,
            val;

        if (!indentLevel) {
            indentLevel = 0;
        }

        for (i = 0; i < indentLevel; i += 1) {
            indentArr.push('  ');
        }

        indentStr = indentArr.join('');

        jade.push(indentStr);

        jade.push(el.localName);

        for (i = 0; i < attributesLength; i += 1) {
            attrName = attributes[i].name.toLowerCase();

            if (attrName === 'id') {
                jade.push('#' + attributes[i].value);
            } else if (attrName === 'class') {
                jade.push('.' + attributes[i].value.split(' ').join('.'));
            } else {
                attrKeyVals.push(attrName + '=\'' + attributes[i].value + '\'');
            }
        }

        if (attrKeyVals.length > 0) {
            jade.push('(');
            jade.push(attrKeyVals.join());
            jade.push(')');
        }

        for (i = 0; i < childrenLen; i += 1) {
            child = children[i];

            if (child.nodeType === 3) {
                if (hasTextNodes) {
                    childValue = normalizeLineBreaks(child.nodeValue);

                    if (childrenLen === 1 && childValue.indexOf('\n') === -1) {
                        // Just 1 unbroken line of text,
                        // keep on the same line as element.
                        jade.push(' ' + trimWhitespace(childValue.trim()));
                    } else {
                        lines = childValue.split('\n');

                        for (j = 0; j < lines.length; j += 1) {
                            val = lines[j].trim();

                            if (val) {
                                jade.push('\n' + indentStr + '  | ' + val);
                            }
                        }
                    }
                }
            } else {
                jade.push('\n' + convert(child, indentLevel + 1));
            }
        }

        return jade.join('');
    }

    $convert.click(function () {
        var html = $html.val(),
            jade = [];

        if (html) {
            $('<div>' + html + '</div>').children().each(function () {
                jade.push(convert(this));
            });

            $jade.text($('<div />').text(jade.join('\n')).html());
            $jade.focus();
            $jade.select();
        }
    });

    $html.focus();
}());

## index.html
<!DOCTYPE html>
<html>
    <head>
        <title>HTML To Jade</title>
        <style>
            p { width: 722px; }
            textarea { display: block; width: 722px; }
            li { margin: 10px; max-width: 722px; }
            .button-classic {
                font-weight: bold;
                border-top: 2px solid #eee;
                border-left: 2px solid #eee;
                border-right: 2px solid #999;
                border-bottom: 2px solid #999;
                background-color: #ddd;
                color: #111;
                padding: 8px;
            }
            .button-classic:hover {
                background-color: #e3e3e3;
            }
            .button-classic:active {
                border-top: 2px solid #999;
                border-left: 2px solid #999;
                border-right: 2px solid #eee;
                border-bottom: 2px solid #eee;
            }
        </style>
    </head>
    <body>
        <p>
            Convert snippets of HTML to Jade. This is by no means a proper
            HTML/Jade converter. It is intended only to convert snippets of HTML,
            not full documents. If you're lucky, you'll get some usable Jade
            from your HTML but most likely you won't.
            <a href="https://gist.github.com/2664128">Here's the source</a>.
            For feedback and suggestions
            <a href="https://gist.github.com/2664128#comments">leave a comment</a>
            there, you'll need a GitHub account.
        </p>
        <div>
            <ol>
                <li>
                    <label for="html">
                        Paste some HTML here. Don't type it in, unless you can
                        suppress the urge to indent your code using Tab. Try it,
                        I bet you can't go 3 lines without habitually hitting
                        Tab.
                    </label>
                    <textarea id="html" rows="15" cols="80"></textarea>
                </li>
                <li>
                    <button id="convert" class="button-classic">
                        Convert The HTML to Jade By Clicking This Classic Button
                    </button>
                </li>
                <li>
                    This is an advertisement. Unless you
                    <a href="https://gist.github.com/2664128">
                        downloaded the source from gist.github.com
                    </a>, or have an ad blocker, in which case this is an
                    unpaid advertisement for GitHub.
                </li>
                <li>
                    <label for="jade">
                        Copy this Jade to your clipboard then go paste it somewhere...
                        If the conversion worked. If not,
                        <a href="https://gist.github.com/2664128#comments">
                            express your disappointment
                        </a>.
                    </label>
                    <textarea id="jade" rows="15" cols="80"></textarea>
                </li>
            </ol>
        </div>
        <script src="//code.jquery.com/jquery-1.8.3.min.js"></script>
        <script src="htmltojade.js"></script>
    </body>
</html>
	/global $/
	(function () {
	'use strict';

	var $html = $('#html'),
	$convert = $('#convert'),
	$jade = $('#jade');

	function normalizeLineBreaks(str) {
	return str.replace(/(\r\n\|\n\|\r)/gm, '\n');
	}

	function trimWhitespace(str) {
	return str.replace(/\s+/g, ' ');
	}

	function hasText(el) {
	var i,
	children = el.childNodes,
	childrenLen = children.length;

	for (i = 0; i < childrenLen; i += 1) {
	if (children[i].nodeType === 3 && children[i].nodeValue.trim()) {
	return true;
	}
	}

	return false;
	}

	function convert(el, indentLevel) {

	var jade = [],
	children = el.childNodes,
	childrenLen = children.length,
	attributes = el.attributes,
	attributesLength = attributes.length,
	i,
	j,
	attrKeyVals = [],
	attrName,
	child,
	childValue,
	hasTextNodes = hasText(el),
	indentArr = [],
	indentStr,
	lines,
	val;

	if (!indentLevel) {
	indentLevel = 0;
	}

	for (i = 0; i < indentLevel; i += 1) {
	indentArr.push(' ');
	}

	indentStr = indentArr.join('');

	jade.push(indentStr);

	jade.push(el.localName);

	for (i = 0; i < attributesLength; i += 1) {
	attrName = attributes[i].name.toLowerCase();

	if (attrName === 'id') {
	jade.push('#' + attributes[i].value);
	} else if (attrName === 'class') {
	jade.push('.' + attributes[i].value.split(' ').join('.'));
	} else {
	attrKeyVals.push(attrName + '=\'' + attributes[i].value + '\'');
	}
	}

	if (attrKeyVals.length > 0) {
	jade.push('(');
	jade.push(attrKeyVals.join());
	jade.push(')');
	}

	for (i = 0; i < childrenLen; i += 1) {
	child = children[i];

	if (child.nodeType === 3) {
	if (hasTextNodes) {
	childValue = normalizeLineBreaks(child.nodeValue);

	if (childrenLen === 1 && childValue.indexOf('\n') === -1) {
	// Just 1 unbroken line of text,
	// keep on the same line as element.
	jade.push(' ' + trimWhitespace(childValue.trim()));
	} else {
	lines = childValue.split('\n');

	for (j = 0; j < lines.length; j += 1) {
	val = lines[j].trim();

	if (val) {
	jade.push('\n' + indentStr + ' \| ' + val);
	}
	}
	}
	}
	} else {
	jade.push('\n' + convert(child, indentLevel + 1));
	}
	}

	return jade.join('');
	}

	$convert.click(function () {
	var html = $html.val(),
	jade = [];

	if (html) {
	$('<div>' + html + '</div>').children().each(function () {
	jade.push(convert(this));
	});

	$jade.text($('<div />').text(jade.join('\n')).html());
	$jade.focus();
	$jade.select();
	}
	});

	$html.focus();
	}());
	<!DOCTYPE html>
	<html>
	<head>
	<title>HTML To Jade</title>
	<style>
	p { width: 722px; }
	textarea { display: block; width: 722px; }
	li { margin: 10px; max-width: 722px; }
	.button-classic {
	font-weight: bold;
	border-top: 2px solid #eee;
	border-left: 2px solid #eee;
	border-right: 2px solid #999;
	border-bottom: 2px solid #999;
	background-color: #ddd;
	color: #111;
	padding: 8px;
	}
	.button-classic:hover {
	background-color: #e3e3e3;
	}
	.button-classic:active {
	border-top: 2px solid #999;
	border-left: 2px solid #999;
	border-right: 2px solid #eee;
	border-bottom: 2px solid #eee;
	}
	</style>
	</head>
	<body>
	<p>
	Convert snippets of HTML to Jade. This is by no means a proper
	HTML/Jade converter. It is intended only to convert snippets of HTML,
	not full documents. If you're lucky, you'll get some usable Jade
	from your HTML but most likely you won't.
	<a href="https://gist.github.com/2664128">Here's the source</a>.
	For feedback and suggestions
	<a href="https://gist.github.com/2664128#comments">leave a comment</a>
	there, you'll need a GitHub account.
	</p>
	<div>
	<ol>
	<li>
	<label for="html">
	Paste some HTML here. Don't type it in, unless you can
	suppress the urge to indent your code using Tab. Try it,
	I bet you can't go 3 lines without habitually hitting
	Tab.
	</label>
	<textarea id="html" rows="15" cols="80"></textarea>
	</li>
	<li>
	<button id="convert" class="button-classic">
	Convert The HTML to Jade By Clicking This Classic Button
	</button>
	</li>
	<li>
	This is an advertisement. Unless you
	<a href="https://gist.github.com/2664128">
	downloaded the source from gist.github.com
	</a>, or have an ad blocker, in which case this is an
	unpaid advertisement for GitHub.
	</li>
	<li>
	<label for="jade">
	Copy this Jade to your clipboard then go paste it somewhere...
	If the conversion worked. If not,
	<a href="https://gist.github.com/2664128#comments">
	express your disappointment
	</a>.
	</label>
	<textarea id="jade" rows="15" cols="80"></textarea>
	</li>
	</ol>
	</div>
	<script src="//code.jquery.com/jquery-1.8.3.min.js"></script>
	<script src="htmltojade.js"></script>
	</body>
	</html>