Allowing HTML elements in title widgets spacing problem

Question

I found some code online to allow me to put span tags in text widget title, so I could change the colour of some titles. It works, but the thing is that I need to make title half red half black color. If I close html tag in the middle of the title, then the rest of the title words have no spacing after the span tag. I tried tweaking the code and appending some spacing, but it makes no difference. If I use spans twice, still the same outcome. Here is the code:

function html_widget_title( $var) {
        $var =  " " . str_replace( '[', '<', $var ) . " " ;
        $var =  " " . str_replace( ']', '>', $var ) . " " ;
        return $var ;
    }
    add_filter( 'widget_title', 'html_widget_title' );

This is how it looks and what I'm trying to fix:

As you can see there is no space after Refurbished because this is where my span tag is being closed. So how can I add spacing after each closed tag?

Widget title:

[span class=red_title_class ] New and Refurbished [/span ] Equipment