JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>test</title>
</head>

<h1></h1><span id="span1" style="background-color: green;"></span><span id="span2" style="background-color: red;">man become as and through find would here and before</span></h1>
<br>
<input type="text" id="boch" >

<script src="js.js"></script>
</html>

JavaScript

var element = document.querySelector("#boch");

var span1 = document.getElementById("span1");
var span2 = document.getElementById("span2");

element.onkeyup = function () {
	var value = element.value;

	var text = span1.innerText + span2.innerText;

	if (value === text) {
		span2.innerText = "";
		span1.innerText = text;
	} else {
		for (var i = 0; i < value.length; i++) {
			if (text.charAt(i) !== value.charAt(i)) {
				break;
			}
		}

		span1.innerText = text.slice(0, i);
		span2.innerText = text.slice(i, text.length);
	}
};