preg_replace every custom chars but URLs

hi i’m using WordPress and i want to replace the following

$items = array( ".","?","!",",","؟","،",":","™","*" );

so i made up this function

function Huemix_content_filter_chars($content){
$items = array();
$items = array( ".","?","!",",","؟","،",":","™","*" );
$before='<span class="kindared">';
$after='</span>';
foreach ( $items as $k => $val ) {
    $content = preg_replace("|(\$val)|","$before$1$after",$content);
     $content = preg_replace("|(<[^>]+?)($before(\$val)$after)([^<]+?>)|","$1$3$4",$content);
}
return $content;
}
add_filter('the_content', 'Huemix_content_filter_chars');

and i didn’t understand whats wrong !
it’s working, but not exactly
it’s break this link

<a href="http://facebook.com/huemix.ly">Huemix Studio, Inc™</a>

it’s printed like this

<a href="http&lt;span class=" kindared"="">://facebook<span class="kindared">.</span>com/huemix<span class="kindared">.</span>ly"&gt;Huemix Studio<span class="kindared">,</span> Inc<span class="kindared">™</span></a>

but it doesn’t breaking the second link

    Follow Us On Facebook <a href="http://facebook.com/huemix.ly">Huemix Studio, Inc™</a>

Follow Us On Twitter <a href="http://twitter.com/HuemixStudio">Huemix Studio, Inc™</a>

you can see my problem online here

and it’s braking my posts images and here is the output for my html posts images

<div class="huemix-works "><img class='huemix-works-image' alt='Huemix Studio Works' src='http://alpha.huemix.ly/wp-content/uploads/Huemix_temp/NASER-GROUP1-698998_140x94.png' /><span class='huemix-works-overlay'></span><a class="huemix-works-zoom-icon huemix-fancybox" title="Huemix Studio Works" href="http://alpha.huemix.ly/wp-content/uploads/2013/11/NASER-GROUP1.png" rel="media">Zoom In</a></div>

Please take a look at my problem online here and here , it’s my demo site
Please see it it’s breaking somethings but another things works fine !
help please !