Sanitize and Highlight Text with HTML at the same time

Question

My web site offers a possibility to store user data and to search for it again. When searching, all data is being printed that contains the query. I want the matching substrings to be highlighted.

In simplified terms I did it like this:

function highlight_and_sanitize_search_result($data, $query){
   $highlighted = str_replace(
                       $query,
                       '<span class="highlight">' . $query . '</span>',
                       $data
                  );
   return sanitize($highlighted);
}

When I print the return value of the function, my HTML code is not sanitized. But when I sanitize it, my <span> will falsely be sanitized, too:

 Query:  match
  Data:  Here is the match
Output:  Here is the <span class="match">match<span>

So I thought I might put it the other way around:

function sanitize_and_highlight_search_result($data, $query){
   $sanitized = sanitize($highlighted);
   return str_replace(
               $query,
               '<span class="highlight">' . $query . '</span>',
               $data
          );
}

But this also leads to an error if you search for a query which is part of the sanitized HTML code:

 Query:  &am
  Data:  You & me
Output:  You <span class="highlight">&am</span>p; me

So what is the right way to do both - sanitation and highlighting?

Answer 1

Sanitize both your data AND the query. Then the sanitized query will still be found in the sanitized HTML data.

function sanitize_and_highlight_search_result($data, $query){
   $sanitized = sanitize($data);
   $query = sanitize($query);
   return str_replace(
               $query,
               '<span class="highlight">' . $query . '</span>',
               $sanitized
          );
}

Example: http://3v4l.org/R9n9U