JSFiddle - React, Tailwind, and code Playground

HTML

<b>Input</b>
<div id="input">
Some sort of code:
{{token id=foo1 class=foo2 attr1=foo3}}
WHo knows what goes here {{token2 id=foo1 class=foo2 attr1=foo3}}
Monkey fonkey
{{token3 id=foo1 class=foo2 attr1=foo3}}
</div>
<br />
<b>Output</b>
<div id="output"></div>

JavaScript

var input = $('#input').text();
var regex = /\{\{(\w+)\s*(.*?)\}\}/g;
var match;
var attribs;
var kvp;
var output = '';

while ((match = regex.exec(input)) != null) {
    output += match[1] += ': <br/>';
    
    if (match.length > 2) {
        attribs = match[2].split(/\s+/g);
        for (var i = 0; i < attribs.length; i++) {
            kvp = attribs[i].split(/\s*=\s*/);
            output += ' - ' + kvp[0] + ' = ' + kvp[1] + '<br/>';       
        }
    }
}
$('#output').html(output);