change text color some strings in a contenteditable innerHTML editor without execCommand

Question

I have a self-made HTML editor with selectors for minimal modifications of the HTML text to change colors or font type or insert images, etc. and it works perfectly. The editor has two editable divs, one in which the web page is shown with its images and colors, and another editable div with the innerHTML that, if not processed, is seen all in plain text with all black letters.

In the latter I color the tags so that they look better, for example <br> I mark it in blue, <p I mark it in red, etc. and until now I do it with JavaScript execCommand, with the code:

document.designMode = "on";
var text1 = "<br>";
var sel = window.getSelection();
sel.collapse(document.getElementById('divInnerHTML'), 0);
while (window. Find(text1)) {
document.execCommand("foreColor", false, "blue");
sel.collapseToEnd();
}
document.designMode = "off";

I already say that it works well but now I find that execCommand has become obsolete so I have to look for another alternative and I can't find the necessary code to make the <br> look blue or the <p and </p > look red or the <img substrings look green, etc. I imagine that an alternative could be to create an array with all the positions of the substrings that contain those strings and then mark all those positions with the corresponding color, that is, the foreColor of the old execCommand.

I am going to try different alternatives but I will thank anyone who can guide me on how to color code without the need for execCommand.

Greetings to the group.

I resume: the best alternative to execCommand in my innerHTML editor in order to color some strings with foreColor.