Use multiple colors in the same OpenLayers label

Question

I made the following code that assigns a style to the field labels.

Now I would like each word or group of words in the label to be a different color previously selected by the user.

For example if we write T: 34 / P34 / S3400MP.

Then T: 34 should be reddish P: 34 to be green S3400MP. to be orange

Here is the code I tried with but not with much luck:

constructii.getSource().forEachFeature(function(feature){

                                      console.log(feature.getProperties());
                                      var style = new ol.style.Style({
                                            fill: new ol.style.Fill({color: color.color_constructii}),
                                            stroke: new ol.style.Stroke({
                                              color: [0,0,230], width: 3
                                            }),
                                            text: new ol.style.Text({
                                                font: '15px Calibri,sans-serif',
                                                fill: new ol.style.Fill({ color: color.color_eticheta }),
                                                stroke: new ol.style.Stroke({
                                                    color: '#fff', width: 1
                                                })
                                            })
                                        });
                                        
                                        var data = "";
                                        
                                        var numar_const = "<div style='color: red;'>"+feature.get('numar_const')+"</div>";
                                        var folosinta = "<div style='color: green;'>"+feature.get('folosinta')+"</div>";
                                        var suprafata = "<div style='color: black;'>"+feature.get('suprafata')+" MP.</div>";
                                        
                                        if($('#etc_numar_const').is(":checked")){ data = data+"N:"+numar_const+"/"; }
                                        if($('#etc_folosinta_const').is(":checked")){ data = data+"F:"+folosinta+"/"; }
                                        if($('#etc_suprafata_const').is(":checked")){ data = data+"S:"+suprafata+""; }
                                        
                                        style.getText().setText(data);
                                        feature.setStyle(style);


                                    })

The error is: The html :( tags also appear on the tag and the respective word tag is not colored in the given color :(

UPDATE:

my constructii color function is here :

features.forEach(function(feature){
                                                    feature.setId(undefined);
                                                    feature.getGeometry().transform('EPSG:31700', 'EPSG:3857');
                                                    //ol.extent.extend(extent, feature.getGeometry().getExtent());
                                                    
                                                var const_stile = new ol.style.Style({
                                                    fill: new ol.style.Fill({color: color.color_constructii}),
                                                    stroke: new ol.style.Stroke({
                                                      color: [0,51,204], width: 1
                                                    }),
                                                  text: new ol.style.Text({
                                                    font: 'bold 11px "Open Sans", "Arial Unicode MS", "sans-serif"',
                                                    placement: 'center',
                                                    fill: new ol.style.Fill({
                                                      color: 'white'
                                                    })
                                                  })
                                                });
                                                
                                                
                                                 var data = "N:"+feature.get('numar_const')+"/F:"+feature.get('folosinta')+"/S:"+feature.get('suprafata')+" MP.";
                                                
                                                if(feature.get('layer') == "CONSTRUCTIE"){
                                                    const_stile.getText().setText(data);
                                                    feature.setStyle(const_stile);
                                                }
                                                
                                                vectorSource.constructii.clear();
                                                vectorSource.constructii.addFeatures(features);
                                                //console.log("features:");
                                                //console.log(features);
                                                map.getView().fit(extent);

Answer 1

You can utilize multiple text styles and measureText for that in a way similar to this:

var font = '15px Calibri,sans-serif';
var context = document.createElement('canvas').getContext('2d');
context.font = font;
  
var constructii = new ol.layer.Vector({
    source,
    style: function(feature) {          
        var numar_const = feature.get('numar_const');
        var folosinta = feature.get('folosinta');
        var suprafata = feature.get('suprafata');
        var numarConstWidth = context.measureText(numar_const).width;
        var folosintaWidth = context.measureText(folosinta).width;          
        return [
            new ol.style.Style({            
                fill: new ol.style.Fill({color: "yellow"}),
                stroke: new ol.style.Stroke({
                  color: [0,0,230], width: 3
                }),
                text: new ol.style.Text({
                    font,
                    text: numar_const,
                    fill: new ol.style.Fill({ color: "red" }),
                    textAlign: 'left',
                })
            }),
            new ol.style.Style({
                text: new ol.style.Text({
                    font,
                    text: folosinta,
                    fill: new ol.style.Fill({ color: "green" }),
                    textAlign: 'left',
                    offsetX: numarConstWidth,
                })
            }),
            new ol.style.Style({
                text: new ol.style.Text({
                    font,
                    text: suprafata,
                    fill: new ol.style.Fill({ color: "orange" }),
                    textAlign: 'left',
                    offsetX: numarConstWidth + folosintaWidth,
                })
            })
        ];
    }
});