JSFiddle - React, Tailwind, and code Playground

HTML

<div id="text"><span class="green">Das ist</span> der Mustertext mit vielen wrtern ..... und es werde noch tausende folgener Mustertext mit vielen wrtern ..... und es werde noch tausende folgen er Mustertext mit vielen wrtern ..... und es werde noch tausende folgen er Mustertext mit vielen wrtern ..... und es werde noch tausende folgen</div>
<br />Anzahl: <div id="anzahl"></div>
<br />Speed: <div id="speed"></div>

CSS

.green {
    color:red;
}

JavaScript

var anz_woerter=5;
var speed=1000;
$('#anzahl').html(anz_woerter);
$('#speed').html(speed);

function color_text() {
    var a = $('#text').html();
    a = a.replace('<span class="green">', '');
    a = a.replace('</span> ', ' <span class="green">');
    var b = a.split(RegExp('<span class="green">'));
    if (!b[1]) return 0;
    var c = b[1].split(/\s/g);
    if (c.length-1 < anz_woerter)
        var d = b[1].indexOf(c[c.length-1])+c[c.length-1].length+b[0].length+20;
    else
        var d = b[1].indexOf(c[anz_woerter-1])+c[anz_woerter-1].length+b[0].length+20;
    a = a.substring(0,d)+ '</span>' + a.substring(d,a.length);
    $('#text').html(a);
    setTimeout(color_text, speed);
}
function change_global(e) {
	if (e.keyCode === 37) {
		//links zentel s langsamer
        speed=speed+10;
	} else if (e.keyCode === 38) {
		//oben mehr wörter
        anz_woerter=anz_woerter+1;
	} else if (e.keyCode === 39) {
		//rechts zentel s schneller
        if(speed>0)
            speed=speed-10;
	} else if (e.keyCode === 40) {
		//unten weniger wörter
        if(anz_woerter>1)
            anz_woerter=anz_woerter-1;
	}
    $('#anzahl').html(anz_woerter);
    $('#speed').html(speed);
}
setTimeout(color_text, speed);
document.addEventListener("keydown", change_global, false);