JSFiddle - React, Tailwind, and code Playground

HTML

<div id="alternator" class="none">
        This is how the line of text should look after the alternating color effect is applied. And so on, and so forth....
    </div>
    <br /><br />
    <form>
        <select style="font:200 11px arial;color:white;background:#333333;" onchange="alternate(options[selectedIndex].value)">
            <option>select colors</option>
            <option value="red|yellow">red & yellow</option>
            <option value="coral|olive">coral & olive</option>
            <option value="green|purple">green& purple</option>
            <option value="gold|silver">gold & silver</option>
            <option value="skyblue|darkorange">skyblue & dark orange</option>
        </select>
    </form>

JavaScript

function alternate(colorpair) {
        if(colorpair.indexOf('|') == -1) return;
        var el = document.getElementById('alternator');
        colorpair = colorpair.split('|');
        var letters = el.innerHTML.replace(/^\s*|\s*$/g,''). /*strip leading/trailing spaces*/
                      replace(/<[^>]*>/g,''). /*strip existing html tags */
                      split(''), 
            output = '';
        for (var w = 0, l = letters.length; w < l; w++) {
            output += '<span style="color:' + ((w % 2) ? colorpair[0] : colorpair[1]) + ';">' + letters[w] + '</span>';
        }
        el.innerHTML = output;
    }