wfpaisa/beautifull.html

## beautifull.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Formato css</title>
<style>
	body{float:left; width:100%;}
	#txt1{float:left; width: 48%;}
	#txt2{float:left; width: 48%;}
	#ok{background:#ccc; float:left; padding:5px 20px; cursor:pointer;}
</style>

</head>
<body>
<textarea name="txt1" id="txt1" cols="30" rows="10">
body{
	color:#FFF;
	background:#ccc;
}
body{
color:red;
	background:#ccc;
			border:#000000;
}
</textarea>

<textarea name="txt2" id="txt2" cols="30" rows="10"></textarea>
<span id="ok">convertir ok</span>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">

	$( document ).ready(function() {
	     	var formatiado = "";

	     	$("#ok").click(function(){

	     		darformato();


	     	})


			function darformato () {
				formatiado =  $("#txt1").val();

				// elimino espacios en blanco
				//formatiado = formatiado.replace(/[\s]/g, "");
				formatiado = formatiado.replace(/\n/g, ""); /*salto de linea*/
				formatiado = formatiado.replace(/\t/g, ""); /*tab*/
				formatiado = formatiado.replace(/\s\s/g, ""); /*dos espacios seguidos*/


				// agrego salto de linea despues de cada cierre
				formatiado = formatiado.replace(/}/g, "}\n");

				// agrego espacio despues de cada punto y coma
				formatiado = formatiado.replace(/;/g, "; ");

				// agrego un salto de lina antes de cada arroba
				formatiado = formatiado.replace(/@media/g, "\n@media");

				// agrego un salto de linea despues de cada ){
				formatiado = formatiado.replace(/\)\s\{/g, "){\n");

				// vuelvo a liminar espacios en blanco duplicados
				formatiado = formatiado.replace(/;\s\s\}/g, ";}");

				// espacio en blanco despues de }
				formatiado = formatiado.replace(/\s\}/g, "}");


				// salto de linea al fin de comentarios
				formatiado = formatiado.replace(/\*\//g, "*/\n");

				// espacio despues de :
				formatiado = formatiado.replace(/:\s/g, ":");


		     $("#txt2").val(formatiado);
		  	}
	});

</script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Formato css</title>
	<style>
	body{float:left; width:100%;}
	#txt1{float:left; width: 48%;}
	#txt2{float:left; width: 48%;}
	#ok{background:#ccc; float:left; padding:5px 20px; cursor:pointer;}
	</style>

	</head>
	<body>
	<textarea name="txt1" id="txt1" cols="30" rows="10">
	body{
	color:#FFF;
	background:#ccc;
	}
	body{
	color:red;
	background:#ccc;
	border:#000000;
	}
	</textarea>

	<textarea name="txt2" id="txt2" cols="30" rows="10"></textarea>
	<span id="ok">convertir ok</span>


	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

	<script type="text/javascript">

	$( document ).ready(function() {
	var formatiado = "";

	$("#ok").click(function(){

	darformato();


	})


	function darformato () {
	formatiado = $("#txt1").val();

	// elimino espacios en blanco
	//formatiado = formatiado.replace(/[\s]/g, "");
	formatiado = formatiado.replace(/\n/g, ""); /salto de linea/
	formatiado = formatiado.replace(/\t/g, ""); /tab/
	formatiado = formatiado.replace(/\s\s/g, ""); /dos espacios seguidos/


	// agrego salto de linea despues de cada cierre
	formatiado = formatiado.replace(/}/g, "}\n");

	// agrego espacio despues de cada punto y coma
	formatiado = formatiado.replace(/;/g, "; ");

	// agrego un salto de lina antes de cada arroba
	formatiado = formatiado.replace(/@media/g, "\n@media");

	// agrego un salto de linea despues de cada ){
	formatiado = formatiado.replace(/\)\s\{/g, "){\n");

	// vuelvo a liminar espacios en blanco duplicados
	formatiado = formatiado.replace(/;\s\s\}/g, ";}");

	// espacio en blanco despues de }
	formatiado = formatiado.replace(/\s\}/g, "}");


	// salto de linea al fin de comentarios
	formatiado = formatiado.replace(/\\//g, "/\n");

	// espacio despues de :
	formatiado = formatiado.replace(/:\s/g, ":");



	$("#txt2").val(formatiado);
	}
	});

	</script>

	</body>
	</html>