Show a different color between two specific characters entered

Question

I have problem show a different color between two specific characters entered div or textarea. Here specific condition;

• String may contain character and number in unspecific order.
• "[]" => Between these characters should be shown in blue.
• ">" => The entire line starting with this character should be show red.

#editor{
   width: 400px;
    height: 100px;
    padding: 10px;
    color: black;
    font-size: 14px;
    font-family: monospace;
    border-color:black;
}
.black {color:black}
.red {color:red}
.blue {color:blue}

<div id="editor">
<div>
<span class="black">XYZ</span>
<span class="blue">[XYZ]</span>
</div>
<div>
<span class="red">>XYZ 123 YXZ</span>
</div>
<div>
<span class="blue">[123]</span>
</div>
</div>