JSFiddle - React, Tailwind, and code Playground

HTML

<textarea class="content">
    [row]
        [col-md-12]
            text
        [/col-md-12]
    [/row]
    [row]
        text
    [/row]
    [row]
        [col-md-12]
            text
        [/col-md-12]
    [/row]
    [row]
        text
    [/row]
</textarea>

CSS

textarea {
    width: 300px;
    height: 300px;
}

JavaScript

// auto_descritive
function wrap_string( str, open_param, close_param ){
    var text = $(".content").text();
    
	// all indexes of str
    var re = new RegExp(str,'gi'), results = [];
    while (re.exec(text)){
        results.push(re.lastIndex);
    }
    
	// check each parent param of each str
    for (var i=0; results[i]; i++) {
        var y_param = text.substring(0, results[i]).lastIndexOf(']')+1;
		var x_param = y_param - open_param.length;
		var lastParam = text.substring(x_param, y_param);
        var half1 = text.substring(0, y_param);
        var half2 = text.substring(results[i]+str.length, text.length);
		if (lastParam != open_param) {
			text = half1 + open_param + str + close_param + half2;
			$(".content").text( text );
			// return true if one was wrapped
			return true;
		}
    }
    
	// return false in case nothing was wrapped
    return false;
    
}


// wrap all "text" with "[col-md-12] /"
while( wrap_string( "text", "[col-md-12]", "[/col-md-12]" ) );