JSFiddle - React, Tailwind, and code Playground

HTML

<div id="s_1"></div>
<div id="s_2"></div>

JavaScript

var s_1 = 'blabla [size=22]the answer[/size] bla bla blupblub';
var s_2 = 'blabla [size=22]the answer[/size] bla bla blupblub [size=32] 32 [/size]';

$('#s_1').html(size(s_1));
$('#s_2').html(size(s_2));


function size(s) {
    var reg = /\[size=(\d{1,2})\]([\s\S]+?)\[\/size\]/gi;
    s = s.replace(reg, function(match, p1, p2) {
        return '<span style="font-size: ' + ((parseInt(p1) > 48) ? '48' : p1) + 'px;">' + p2 + '</span>';
    })
    return s;    
}