JavaScript - colorear texto en div editable innerHTML

Hola:

Tengo un editor HTML de elaboración propia con unos selectores para minimas modificaciones del texto HTML para cambiar colores o tipo de fuente o insertar imagenes, etc.. y va funcionando perfectamente.
El editor cuenta con dos div editables, uno en el que se muestra la página web con sus imagenes y colores, y otro div editable con el innerHTML que si no se procesa, se ve todo en color negro..

En este último coloreo los tags para que se vean mejor por ejemplo <br> lo marco en azul, <p> lo marco en rojo, etc. y hasta ahora lo hago con execCommand de JavaScript, con el codigo:

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";


Ahora me encuentro con que execCommand ha quedado obsoleto por lo que tengo que buscar otra alternativa y no encuentro el codigo necesario para que los <br> se vean azules o los <p y los </p>se vean rojos o las subcadenas <img se vean verdes, etc.
Me imagino que una alternativa puede ser crear un array con todas las posiciones de las substring que contengan esas cadenas y luego marcar todas esas posiciones con el color que corresponda, es decir el foreColor del antiguo execCommand.

Voy a ir intentando distintas alternativas pero agradeceré a quien me pueda orientar sobre la manera de colorear código sin necesidad de execCommand.

Saludos al grupo.