Script Replacer

<!DOCTYPE html>
<html>
<head>
	<title>Script Replace</title>
	<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
	<link rel="stylesheet" href="http://cdn.jsdelivr.net/semantic-ui/1.12.1/semantic.min.css">
	<script src="http://cdn.jsdelivr.net/semantic-ui/1.12.1/semantic.min.js"></script>
</head>
<body style="width: 100%; overflow: scroll;">

<div class="ui centered grid">

	<div class="thirteen wide column" >

	<h1 style="margin: 30px 0;">Code Replace<small> for TigerBoy</small></h1>

	<form class="ui form">

		<div class="field" style="margin-top: 30px">
			<label>Where to replace (Code)</label>
			<textarea id="code"></textarea>
		</div>

		<div class="ui grid">

			<div class="eight wide column">
				<div class="field">
					<label>Variables</label>
					<textarea id="vars"></textarea>
				</div>
			</div>

			<div class="eight wide column">
				<div class="field">
					<label>To Replace</label>
		          	<input type="text" id="toReplace" placeholder="">
		        </div>
		        <div class="ui primary fluid button" onclick="javascript:process();">
				   	Process Every Variable
				</div>
			</div>

		</div>

		<div class="field" style="margin-top: 30px">
			<label>Replaced</label>
			<textarea id="replaced"></textarea>
		</div>
	</form>

	</div>

</div>

<script type="text/javascript">

	var code = null;
	var variables = null;
	var toReplace = null;
	var replaced = null;
	var actualLine = 0;

	$(function(){
		code = $('#code');
		variables = $('#vars');
		toReplace = $('#toReplace');
		replaced = $('#replaced');
	});

	function process(){
		var entireString = '';

		var inLines = variables.val().split('\n');
		while (actualLine < inLines.length){
			var actualVar = inLines[actualLine];
			var myStr = code.val();
			while (myStr.indexOf(toReplace.val()) != -1){
				myStr = myStr.replace(toReplace.val(), actualVar);
			}
			entireString += myStr + "\n\n\n";
			++actualLine;
		}

		replaced.val(entireString);
	}

</script>
</body>
</html>