text highlighting using javascript

Question

I am trying to use a text highlight option using javascript.I know how to find the start postiion of the string, bt how do I make it highlight. my code looks like

<div id="entity">health insurance</div>
<div id="article">This kind of insurance is meant to supplement health insurance for cancer-care costs. But generally you're better off putting your money toward comprehensive health policies. </div>

and the javascript that I have used it

$(document).ready(function()
{
var test=document.getElementById('article').innerHTML;
var variable=document.getElementById('entity').innerHTML;
alert(test.search(new RegExp(variable, "i")));
});

This will alert the start postion of the string.

Clarify your question.What do you want to highlight, is it the div containing text? — shanky
– shanky, Commented Jun 5, 2012 at 13:58
The content inside entity id should be highlighted inside article id.. — user1371896
– user1371896, Commented Jun 5, 2012 at 14:02

Chango · Accepted Answer · 2012-06-13 16:10:26Z

1

HTML:

<div id="entity">health insurance</div>
<div id="article">This kind of insurance is meant to supplement health insurance for cancer-care costs. But generally you're better off putting your money toward comprehensive health policies. </div>

CSS:

.highlight {
  background-color: yellow
}

Javascript:

$(document).ready(function () {
  var $test = $('#article');
  var entityText = $('#entity').html();
  var highlight = '<span class="highlight">' + entityText + '</span>';
  $test.html($test.html().replace(entityText, highlight));
}

Demo: http://jsfiddle.net/ehzPQ/2/

So, I'm just replacing the first occurrence of the 'entity' string with the same string wrapped up in a span class.

Did I understood your problem right?

-----------------------UPDATE-------------------------

If you want to highlight all the occurrences modify use a regular expression:

Updated Javascript:

$(document).ready(function () {
  var $test = $('#article');
  var entityText = $('#entity').html();
  var entityRegularExpression = new RegExp("\\b" + entityText + "\\b", "gi");
  var highlight = '<span class="highlight">' + entityText + '</span>';
  $test.html($test.html().replace(entityRegularExpression, highlight))
}

And updated demo: http://jsfiddle.net/ehzPQ/3/

edited Jun 13, 2012 at 16:10

answered Jun 5, 2012 at 14:20

Chango

6,8121 gold badge30 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user1371896 Over a year ago

Could you tell me what this statement does ' var entityRegularExpression = new RegExp(entityText,"g")' ?

Chango Over a year ago

It creates a regular expression using the content of 'entityText', the 'g' stands for global. So, if 'entityText = "foo"' the regular expression will look for all the occurrences of 'foo' in a string. i.e. its equivalent to '/foo/g'.

user1371896 Over a year ago

stackoverflow.com/questions/11009219/…

user1371896 Over a year ago

do u know what to do if a . or $ symbol comes in between the matching wrds... using this form, the $ or dot symbol wont get highlighted..

user1371896 Over a year ago

stackoverflow.com/questions/11015699/…

Tooraj Jam · Accepted Answer · 2012-06-05 14:01:26Z

0

Just replace yourDesireString with something like <span class='highlight'>yourDesireString</span>.

span.highlight {
     background-color: yellow;
}

answered Jun 5, 2012 at 14:01

Tooraj Jam

1,62215 silver badges27 bronze badges

2 Comments

user1371896 Over a year ago

it will nt be fixed one...Ive just given a static example..what if the content im going to highlight is generated realtime

Tooraj Jam Over a year ago

So do the replace job dynamically.

Collectives™ on Stack Overflow

text highlighting using javascript

2 Answers 2

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related