JSFiddle - React, Tailwind, and code Playground

HTML

<span id="pgnOutputText">nothing</span>

JavaScript

function CleanPgnText(pgn) {
    var pgnTextEdited = '';
    var str;
    var pgnOutputArea = document.getElementById("pgnOutputText");
    str = pgn;
    str = str.replace(/\[/g, "("); //sometimes he uses [ incorrectly for variations
    str = str.replace(/\]/g, ")");
    str = str.replace(/[\n¬]*/g, ""); // remove newlines and that weird character that MS Word sticks in
    str = str.replace(/\s{2,}/g, " "); // turn more than one space into one space
    
    //Start regexp processing
    var pattern = /((?:\s?[\(\)]?\s?[\(\)]?\s?[0-9]{1,3}\.{1,3}\s[NBRQK]?[a-h1-8]?x?[a-hO][1-8-][O-]{0,3}[!?+#=]{0,2}[NBRQ]?[!?+#]{0,2}(?:\s[NBRQK]?[a-h1-8]?x?[a-hO][1-8-][O-]{0,3}[!?+#=]{0,2}[NBRQ]?[!?+#]{0,2})?\s?[()]?\s?[()]?\s?)+)|((?:(?!\s?[\(\)]?\s?[\(\)]?\s?[0-9]{1,3}\.{1,3}\s[NBRQK]?[a-h1-8]?x?[a-hO][1-8-][O-]{0,3}[!?+#=]{0,2}[NBRQ]?[!?+#]{0,2})[^\)\(])+)|((?:\)\s\())/g;

    while ((match = pattern.exec(str)) != null) {
        if (match[1] != null) {
            pgnTextEdited += match[1];
        } else if (match[2] != null) {
            pgnTextEdited += '{' + match[2] + '}';
        } else if (match[3] != null) {
            pgnTextEdited += match[3];
        }
    }
    //end regexp processing

    pgnOutputArea.innerHTML = pgnTextEdited;
}

CleanPgnText("1. e4 e5 2. Nf3 Nc6 3. c3 d5 4. Bd3?! f5 5. exd5?! Qxd5 6. Qe2 Be6 7. Bc2 O-O-O 8. O-O Nf6 9. d3 h6 10. Bb3 Qd6 11. Rd1? Bxb3 12. axb3 e4 13. Ne1 Ng4 14. g3 g5 15. Be3 h5!? 16. Bxg5 h4! 17. Bf4? ( After 17. Bxd8 ( 17. h3 hxg3! 18. hxg4 Qg6! 19. Bxd8 Rh1+! ) 17... hxg3 18. hxg3 e3! 19. f4 Kxd8! 20. Nf3 Qh6 21. Qg2 e2 22. Re1 Ne3 23. Qh2 Qg7! Black was only better. Now comes a gorgeous queen sacrifice. ) 17... hxg3!! 18. Bxd6 gxf2+ 19. Qxf2?! Richard correctly evaluates the exposed nature of his king and immediately returns the queen. Why\" ? !\" to 19.Qxf2 then? Simply because now, with material about equal, white's position is absolutely hopeless anyway. The king hunt is relentless. There are several beautiful lines...