JSFiddle - React, Tailwind, and code Playground

HTML

<p>Start delimiter: <input id='start' value="START"></input></p>
<p>End delimiter: <input id='end' value="END"></input></p>
<p>Input:
    <textarea id="textin" cols="80" rows="10">
START-Hyphens-should-be-replaced-here-01-END
OTHER-no-changes-here-02-WORD
START-Hyphens-should-also-be-replaced-here-03-END
OTHER-no-changes-here-either-04-TEXT
    </textarea>
</p>
<button onclick="process();">Submit</button>
<pre id="textout">output</pre>

JavaScript

function process() {
    var start = document.getElementById('start').value;
    var end = document.getElementById('end').value;
    var textin = document.getElementById('textin').value;
    
    var splitStart = textin.split(start);
    for (var i = 0; i < splitStart.length; i++) {
        var splitEnd = splitStart[i].split(end);
        if (splitEnd.length > 1)
            splitEnd[0] = splitEnd[0].replace(/-/g, ' ');
        splitStart[i] = splitEnd.join(end);
    }
    var textout = splitStart.join(start);
    document.getElementById('textout').textContent = textout;
}