Highlighting Text Under Div Tag

Question

Lets say I have a div like this:

<div id="test" class="sourcecode">
"Some String"
</div>

Is it possible to have css and js to highlight a portion of that string based on a search query?

Like if I was searching for the word Stri it would just highlight that part?

Jonathan M · Accepted Answer · 2012-02-09T19:11:04.683

2

You'll have to divide the text, separating the highlighted part into a <span>. Like this.

<div id="test" class="sourcecode">
"Some <span style="background-color:yellow">Stri</span>ng"
</div>

To do characters that represent HTML tags, if you have:

<div id="test" class="sourcecode">
    &lt;html&gt;String&lt;/html&gt;
</div>

...you can highlight the same way as before:

<div id="test" class="sourcecode">
    <span style="background-color:yellow">&lt;html&gt;Stri</span>ng&lt;/html&gt;
</div>

edited Feb 09 '12 at 19:11

answered Feb 09 '12 at 18:55

Jonathan M

17,145
9
58
91

hmm how would I go by converting everything inside a string to its character representation? – Novazero Feb 09 '12 at 19:17
Are you using raw javascript or javascript with a library like jQuery? – Jonathan M Feb 09 '12 at 19:18
For encoding the characters with jQuery, see this answer: http://stackoverflow.com/questions/1219860/javascript-jquery-html-encoding – Jonathan M Feb 09 '12 at 19:27

score 2 · Answer 2 · answered Feb 09 '12 at 18:59

2

Try the jquery.highlight plugin.

Make a jQuery selector containing the div in which you want to highlight some text:

var $div = $('#test');

Then run the highlight plugin with the word(s) you wish to highlight

$div.highlight('Stri');

Also you should style the class "highlight" in your css, since that's the class the highlighter will give the highlighted text:

.highlight
{
    background-color: yellow;
    outline: 1px solid black;
}

answered Feb 09 '12 at 18:59

Hubro

56,214
69
228
381

The problem that I forgot to address was how would I go about highlighting a string that has html like "string" where I want to highlight "str" part. – Novazero Feb 09 '12 at 19:04

score 0 · Answer 3 · answered Feb 09 '12 at 19:09

<div id="test" class="sourcecode">
"Some String"
</div>

in javascript after getting search result.

<script>
  var test = $('test').innerHtml;
  var query= 'Str';
  var new_str = test.replace(query, '<font style="background:yellow;color:red;" >'+query+'</font>');
  $('test').innerHtml = new_str;
</script>

Highlighting Text Under Div Tag

3 Answers3