Text Search - Highlighting the Search phrase

Question

What will be the best way to highligh the Searched pharase within a HTML Document.

I have Complete HTML Document as a Large String in a Variable. And I want to Highlight the searched term excluding text with Tags.

For example if the user searches for "img" the img tag should be ignored but phrase "img" within the text should be highlighted.

Do you mean in the user browser ? If so, it's a pure javascript question that should be retagged — Riduidel, Aug 26 '10 at 09:06
As far as i understand, this is about javascript, not java nor programming-languages -> retagged. — atamanroman, Aug 26 '10 at 09:19

score 1 · Accepted Answer · edited May 23 '17 at 11:47

Don't use regex.

Because regex cannot parse HTML (or even come close), any attempt to mess around with matching words in an HTML string risks breaking words that appear in markup. A badly-implemented HTML regex hack can even leave you with HTML-injection vulnerabilities which an attacker may be able to leverage to do cross-site-scripting.

Instead you should parse the HTML and do the searches on the text content only.

If you can accept a solution that adds the highlighting from JavaScript on the client side, this is really easy because the browser will already have parsed the HTML into a bunch of DOM objects you can manipulate. See eg. this question for a client-side example.

If you have to do it with PHP that's a bit more tricky. The simple solution would be to use DOMDocument::loadHTML and then translate the findText function from the above example into PHP. At least the DOM methods used are standardised so they work the same.

score 0 · Answer 2 · answered Aug 26 '10 at 09:16

0

Edit: This was tagged as Java before, so this answer might not be applicable.

This is quick and dirty but it might work for you, or at least be a starting point

private String highlight(String search,String html) {
    return html.replaceAll("(>[^<]*)("+search+")([^>]*<)","$1<em>$2</em>$3");
}

This requires testing, and I make no guarantees that its correct but the simplest way to explain how is that you ensure that your term exists between two tags and is thus is not itself a tag or part of a tag parameter.

answered Aug 26 '10 at 09:16

BjornS

1,004
8
19

JavaSCRIPT, not Java ;) Edit: Ah, I see you have been confused by the tag 'java'. – Lekensteyn Aug 26 '10 at 09:20
Yup, I kept the answer since the regex is at least relevant :) – BjornS Aug 26 '10 at 09:25

jAndy · Answer 3 · 2010-08-26T09:35:13.640

var highlight = function(what){
   var html  = document.body.innerHTML,

       word  = "(" + what + ")",
       match = new RegExp(word, "gi");

   html = html.replace(match, "<span style='background-color: red'>$1</span>");

   document.body.innerHTML = html;
};

highlight('ll');

This would highlight any occurence of 'll'.

Be carefull by calling highlight() with < or > or any tag name, it would also replace those, screwing up your markup. You might workaround that by reading innerText instead of innerHTML, but that way you'll lose the markup information.

Best way probably is to implement a parser routine yourself.

Example: http://www.jsfiddle.net/DRtVn/

score 0 · Answer 4 · answered Aug 26 '10 at 10:25

0

there is a free javascript library that might help you out -> http://scott.yang.id.au/code/se-hilite/

answered Aug 26 '10 at 10:25

Christophe

4,798
5
41
83

score 0 · Answer 5 · answered Aug 26 '10 at 11:58

You must be using some server side language to render the search results on the webpage.

So the best way I can think of is to highlight the word while rendering it using the server side language itself,which may be php,java or any other language.

This way you would have only the result strings without html and without parsing overhead.

Text Search - Highlighting the Search phrase

5 Answers5