Untitled

<!DOCTYPE html>
<html>

<head>
	<title>Word finder!</title>

</head>

<body>
	<p>Enter your text below: </p>
	<form>
		<input id="usertext" type="text" name="usertext">
	</form>
	<button id="toclick">Submit</button>
	<p id="todisplay"> </p>

	<script>
		function update(element, dictionary){
			var index = -1;
			var wordlen = 0;
			for (var i = 0; i < element.value.length; i++){
				for (word in dictionary){
					if (i + word.length > dictionary.length)
						break;
					var substring = true;
					for (var j = 0; j < word.length; j++)
						if (element.value[i+j] !== word[j]){
							substring = false;
							break;
						}
					if (substring){
						index = i;
						wordlen = word.length;
						break;
					}
				}
				if (index !== -1)
					break;
			}
			if (index === -1)
				return;
			var substring1 = document.createTextNode(element.value.substring(0, index));
			var substring2 = document.createTextNode(element.value.substring(index, index + wordlen));
			var substring3 = document.createTextNode(element.value.substring(index + wordlen, element.value.length));
			var span1 = document.createElement("span");
			span1.appendChild(substring1);
			var span2 = document.createElement("mark");
			span2.appendChild(substring2);
			var span3 = document.createElement("span");
			span3.appendChild(substring3);
			var parent = element.parentNode();
			parent.replaceChild(element, span1);
			parent.append(span2);
			parent.append(span3);
			update(span3, dictionary);
		}

		var dict = ["fuck", "shit", "damn"];

		var text = document.getElementById("usertext").value;
		var display = document.getElementById("todisplay");
		display.innerHTML = text;

		document.getElementById("toclick").addEventListener("click", update(display, dict));

	</script>
</body>

</html>