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,
                })
            })
        ];
    }
});