6

So I'm making a search function for comments. Someone else here helped me with the SQL query. What I also want to do is to highlight the search query text in the results.

The results are stored as HTML inside a $variable. How can I wrap the search query text inside a <span> tag for example, without messing up the html.

for eg. the search query can be foo bar and the output can look like:

<p>bla bla foo bar bla</p>

so it should be something like:

<p>bla <span class="highlight">foo bar</span> bla bla</p>
Improve this question

7 Answers 7

Reset to default
7

Simple find and replace:

$resultHTML = str_replace($searchString, '<span class="highlight">'.$searchString.'</span>', $resultHTML );
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Don't forget that there is a case insensitive version also... str_ireplace
2 
<?php

$result = "<p>Bla bla foo bar bla bla test x x x</p>";

$query = "foo bar";

// The important point here is, USE single quote ( ' ) in replacement part!!
echo preg_replace( "/($query)/", '<span class="highlight">${1}</span>', $result );
Improve this answer

1 Comment

You can use double quotes too, just gotta escape 'em. For more info - en.wikipedia.org/wiki/Escape_character
1

I think this is more complicated than it looks. If we are searching for foo bar then

<p>bla bla foo bar bla</p>

will be converted into

<p>bla <span class="highlight">foo bar</span> bla bla</p>

but what about some special cases? It could be that foo bar is matched inside an HTML tag:

<p>bla bla <span class="foo bar">foo bar</span> bla</p>

which will be replaced as

<p>bla <span class="<span class="highlight">foo bar</span>">foo bar</span> bla bla</p>

Am I right with this? I haven't been into this issue, but I'd recommend you checking on CakePHP's docs (yeah, I know you are not using the framework--) in the Text helper, the highlight() method which handles HTML tags correctly. Take a look at the source, give it a shot and if it works for you, go ahead and copy it.

Improve this answer

1 Comment

yes, that situations can occur. I should have mentioned that in the question. anyway I found a easier solution, using jQuery! :D
1 
$searchString = 'foo bar';
$searchResult = '<p>bla bla foo bar bla</p>';

var_dump(str_replace($searchString, '<span>'.$searchString.'</span>', $searchResult));

var_dump(preg_replace('/'.$searchString.'/', '<span>'.$searchString.'</span>', $searchResult));
Improve this answer

Comments

1

If you make sure that the search term itself does not contain any HTML, you can go straight ahead and wrap it it in "<span>" with the help of str_replace().

Note that this is one of the very rare occasions where dealing with HTML via string functions is not bad per se.

If the search term can contain HTML (i.e. the highlight can span over tag borders), things get a lot more complicated and you won't get away with a clever shortcut like the one above.

Improve this answer

2 Comments

well there's another problem. for eg. the output can have <img src="foo bar.jpg" />, then the markup breaks up..
@Alex: This is true, and it's exactly the reason why using basic string manipulation is generally considered a no-no for working with HTML. It depends a lot on your data if this simplistic approach is viable or not. If the comment can contain any HTML, you are in the "a lot more complicated" corner very fast.
0

I had the same question but I found this

The code is built to randomly change highlight colors, but this is done through a function, so it is easy to modify to use one color:

     $color = '#FCB514'; //self::generate_colors();

First Post!

Improve this answer

Comments

0

text-shadow: 1px 1px 1px #FCD600;

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.