D1SoveR/gist:1216421

## gistfile1.html
<!DOCTYPE html>
<html>
	<head>
		<title>Test</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1">
	</head>
	<body>

		<div class="big ribbon">
			<h1>Hello <br/>World</h1>
		</div>

		<div class="small ribbon">
			<h2>Hello <br/>World</h2>
		</div>

	</body>
	<script type="text/javascript">

		/* INLINE BACKGROUNDS
		 * Splits the text at explicit line breaks (<br>) and wraps the lines in <span> tags.
		 *
		 * Optionally, wrapping can be specified as recursive - in such case, each three of
		 * child nodes will be traversed, <br> line breaks processed there as well.
		 *
		 * Optionally, a class name can be specified. It will be set on all wrapping <span> tags.
		 */
		function inlinebackgrounds(element, recursive, className) {

			if (typeof recursive === "undefined") { recursive = false; }
			else { recursive = !!recursive; }

			var result = [];
			var temp = [];
			result.push(temp);

			/* This bit goes over the element's child nodes, separating them
			 * into groups, splitting the groups at <br> breaks. If recursive,
			 * processes every element with child nodes for breaks as well.
			 */
			for (i in element.childNodes) {
				if (element.childNodes.hasOwnProperty(i)) {

					if ( (typeof element.childNodes[i].tagName === "string") &&
						 (element.childNodes[i].tagName.toUpperCase() === "BR") ) {
						temp = [];
						result.push(temp);
					} else {
						if (recursive && (element.childNodes[i].childNodes.length > 0)) {
							if (typeof className === "string") { inlinebackgrounds(element.childNodes[i], true, className); }
							else                               { inlinebackgrounds(element.childNodes[i], true); }
						}
						temp.push(element.childNodes[i]);
					}

				}
			}

			/* Removes the old layout of nodes. */
			for (var i = element.childNodes.length - 1; i >= 0; i--)
				element.removeChild(element.childNodes[i]);

			/* Wraps each group in separate <span> and puts it back in. */
			for (var i = 0; i < result.length; i++) {
				if (result[i].length > 0) {
					var el = document.createElement("span");
					if (typeof className === "string") { el.className = className; }
					for (var j = 0; j < result[i].length; j++)
						el.appendChild(result[i][j]);
					element.appendChild(el);
				}
			}

		};

		var select = new RegExp("big|small");
		var elements = Array.filter(document.getElementsByTagName("h1"), function(el) {
			console.log(el, el.parentNode.tagName.toUpperCase(), el.parentNode.className.match(select));
			return ((el.parentNode.tagName.toUpperCase() === "DIV") && el.parentNode.className.match(select));
		});
		for (var i = 0; i < elements.length; i++) { inlinebackgrounds(elements[i]); }
		var elements = Array.filter(document.getElementsByTagName("h2"), function(el) {
			return ((el.parentNode.tagName.toUpperCase() === "DIV") && el.parentNode.className.match(select));
		});
		for (var i = 0; i < elements.length; i++) { inlinebackgrounds(elements[i]); }

	</script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1">
	</head>
	<body>

	<div class="big ribbon">
	<h1>Hello <br/>World</h1>
	</div>

	<div class="small ribbon">
	<h2>Hello <br/>World</h2>
	</div>

	</body>
	<script type="text/javascript">

	/* INLINE BACKGROUNDS
	* Splits the text at explicit line breaks (<br>) and wraps the lines in <span> tags.
	*
	* Optionally, wrapping can be specified as recursive - in such case, each three of
	* child nodes will be traversed, <br> line breaks processed there as well.
	*
	* Optionally, a class name can be specified. It will be set on all wrapping <span> tags.
	*/
	function inlinebackgrounds(element, recursive, className) {

	if (typeof recursive === "undefined") { recursive = false; }
	else { recursive = !!recursive; }

	var result = [];
	var temp = [];
	result.push(temp);

	/* This bit goes over the element's child nodes, separating them
	* into groups, splitting the groups at <br> breaks. If recursive,
	* processes every element with child nodes for breaks as well.
	*/
	for (i in element.childNodes) {
	if (element.childNodes.hasOwnProperty(i)) {

	if ( (typeof element.childNodes[i].tagName === "string") &&
	(element.childNodes[i].tagName.toUpperCase() === "BR") ) {
	temp = [];
	result.push(temp);
	} else {
	if (recursive && (element.childNodes[i].childNodes.length > 0)) {
	if (typeof className === "string") { inlinebackgrounds(element.childNodes[i], true, className); }
	else { inlinebackgrounds(element.childNodes[i], true); }
	}
	temp.push(element.childNodes[i]);
	}

	}
	}

	/* Removes the old layout of nodes. */
	for (var i = element.childNodes.length - 1; i >= 0; i--)
	element.removeChild(element.childNodes[i]);

	/* Wraps each group in separate <span> and puts it back in. */
	for (var i = 0; i < result.length; i++) {
	if (result[i].length > 0) {
	var el = document.createElement("span");
	if (typeof className === "string") { el.className = className; }
	for (var j = 0; j < result[i].length; j++)
	el.appendChild(result[i][j]);
	element.appendChild(el);
	}
	}

	};

	var select = new RegExp("big\|small");
	var elements = Array.filter(document.getElementsByTagName("h1"), function(el) {
	console.log(el, el.parentNode.tagName.toUpperCase(), el.parentNode.className.match(select));
	return ((el.parentNode.tagName.toUpperCase() === "DIV") && el.parentNode.className.match(select));
	});
	for (var i = 0; i < elements.length; i++) { inlinebackgrounds(elements[i]); }
	var elements = Array.filter(document.getElementsByTagName("h2"), function(el) {
	return ((el.parentNode.tagName.toUpperCase() === "DIV") && el.parentNode.className.match(select));
	});
	for (var i = 0; i < elements.length; i++) { inlinebackgrounds(elements[i]); }

	</script>
	</html>