JSFiddle - React, Tailwind, and code Playground

HTML

<input id="source" placeholder="RegExp, e.g. [0-9]" type="text" />
<button id="optimize">Optimize</button>
<br />
<input id="result" placeholder="Optimized RegExp" type="text" />
<br />
<div id="message"></div>

JavaScript

function validateRegExp(re) {
    try {
        re = new RegExp(re);
        $('#message').text('');
        return true;
    } catch (e) {
        $('#message').text(e.name + ': ' + e.message);
        return false;
    }
}

$('#source').val(localStorage.getItem('source') || '');

$('#optimize').on('click', function () {
    var value = $('#source').val() || '';
    if (validateRegExp(value)) {
        localStorage.setItem('source', value);
        value = value.replace(/\[0\-9\]/g, '\\d');
        value = value.replace(/\(([^\\])\|([^\\])\)/g, '([$1$2])');
        value = value.replace(/\(([^\\])\|([^\\])\|([^\\])\)/g, '([$1$2$3])');
        value = value.replace(/\{1\}/g, '').replace(/\{0,\s*1\}/g, '?');
    }
    $('#result').val(value);
});