i'm trying to figure out what is wrong in this code. it either doesn't highlight the search result OR it outputs html tags surrounding the highlighted text. .

$search_result = "";
$search_result = trim($search_result);

$special_cases = array( '%', '_', '+' );
$search_result = str_replace( $special_cases, '',  $_GET["q"] );


//Check if the string is empty
if ($search_result == "") {
  echo  "<p>Search Error</p><p>Please enter a search...</p>" ;
  exit();
      }

$result = mysql_query('SELECT cQuotes, vAuthor, cArabic, vReference FROM thquotes WHERE cQuotes LIKE "%' .  mysql_real_escape_string($search_result) .'%" ORDER BY idQuotes DESC', $conn)
  or die ('Error: '.mysql_error());

//eliminating special characters
function h($s) {
    echo htmlspecialchars($s, ENT_QUOTES);
}

 function highlightWords($string, $word)
 {

        $string = str_replace($word, "<span style='background-color: #FFE066;font-weight:bold;'>".$word."</span>", $string);
    /*** return the highlighted string ***/
    return $string;

 }

?>

<div class="caption">Search Results</div>
<div class="center_div">
<table>
    <?php while ($row= mysql_fetch_array($result, MYSQL_ASSOC)) {
        $cQuote =  highlightWords($row['cQuotes'], $search_result);
        ?>
        <tr>
        <td style="text-align:right; font-size:15px;"><?php h($row['cArabic']); ?></td>
            <td style="font-size:16px;"><?php h($cQuote); ?></td>
            <td style="font-size:12px;"><?php h($row['vAuthor']); ?></td>
            <td style="font-size:12px; font-style:italic; text-align:right;"><?php h($row['vReference']); ?></td>
        </tr>
    <?php } ?>
</table>
</div>

on the browser, it is outputted as:

A good <span style='background-color: #FFE066;font-weight:bold;'>action</span> is an ever-remaining store and a pure yield

or if a div is used with class:

A good <div class='highlight'>action</div> is an ever-remaining store and a pure yield