JSFiddle - React, Tailwind, and code Playground

by Michel Plungjan

HTML

<select id='lineSelector'>
    <option>- select word -</option>
    <option>first</option>
    <option>second</option>
    <option>third</option>
    <option>fourth</option>
    <option>fifth</option>
</select><br/>
<textarea  id='tarea' cols='40' rows='5'>first second third fourth fifth</textarea>

JavaScript

function selectTextareaLine(tarea,word) {
        const words = tarea.value.split(" ");

        // calculate start/end
        const startPos = tarea.value.indexOf(word), endPos = startPos + word.length

        if(typeof(tarea.selectionStart) != "undefined") {
            tarea.focus();
            tarea.selectionStart = startPos;
            tarea.selectionEnd = endPos;
            return true;
        }

        // IE
         if (document.selection && document.selection.createRange) {
            tarea.focus();
            tarea.select();
            var range = document.selection.createRange();
            range.collapse(true);
            range.moveEnd("character", endPos);
            range.moveStart("character", startPos);
            range.select();
            return true;
        }

        return false;
    }

/// debugging code
var sel = document.getElementById('lineSelector');
var tarea = document.getElementById('tarea');
sel.onchange = function() {
    selectTextareaLine(tarea,this.value);
}