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">2</div>
<br />Speed:
<div id="speed">1000</div>
<br /><a onclick="javascript:reset()"><span id="reset">reset</span></a>

<a onclick="javascript:play_stop()"><span id="play_stop">play</span></a>

CSS

.green {
    color:green;
}
#play_stop, #reset {
    padding:2px;
    cursor:pointer;
    border:1px solid black;
}

JavaScript

var anz_woerter = 2;
var speed = 1000;
var play = 0;
$('#anzahl').html(anz_woerter);
$('#speed').html(speed);

function color_text() {
    if (!play) return 0;
    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) a = a + '</span>';
    else {
        c[anz_woerter-1]=c[anz_woerter-1]+'</span>';
        a = b[0]+'<span class="green">'+c.join(' ');
    }
    $('#text').html(a);
    setTimeout(color_text, speed);
}

function change_global(e) {
    if (e.keyCode === 37) speed = speed + 10;
    else if (e.keyCode === 38) anz_woerter = anz_woerter + 1;
    else if (e.keyCode === 39) { if (speed > 0) speed = speed - 10; } 
    else if (e.keyCode === 40) { if (anz_woerter > 1) anz_woerter = anz_woerter - 1; }
    else if (e.keyCode === 32) play_stop();
    else if (e.keyCode === 8) reset();
    $('#anzahl').html(anz_woerter);
    $('#speed').html(speed);
}

function reset() {
    var a = $('#text').html();
    a = a.replace('<span class="green">', '');
    a = a.replace('</span>', '');
    a = '<span class="green">' + a;
    var b = a.split(/\s/g);
    if (b.length - 1 < anz_woerter) a = a + '</span>';
    else {
        b[anz_woerter]=b[anz_woerter]+'</span>';
        a = b.join(' ');
    }
    play = 0;
    $('#play_stop').html('play');
    $('#text').html(a);
}

function play_stop() {
    if (play) {
        play = 0;
        $('#play_stop').html('play');
    } else {
        play = 1;
        setTimeout(color_text, speed);
        $('#play_stop').html('stop');
    }
}
document.addEventListener("keydown", change_global, false);