Question

I have large text containers and i want to compare and highlight them using jquery. The question answered here highlight a word with jquery is perfect except it contains repetition of text. Here is an example

<div id="source">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
<div id="similar1">Lorem ipsum dolor</div>
<div id="similar2">consectetuer adipiscing elit</div>

Now I want to match similar1 and similar2 with source div. The solution in above link suggests following code:

 $("#similar1").highlight("Lorem ipsum dolor sit amet, consectetuer adipiscing elit.");
 $("#similar2").highlight("Lorem ipsum dolor sit amet, consectetuer adipiscing elit.");

As you can see I have to repeat source text everytime. Is it possible to get contents directly from source div? i.e.

 $("#similar1").highlight($('#source').val());

Answer 1

Use classes and text():

<div id="similar1" class="similar">Lorem ipsum dolor</div>
<div id="similar2" class="similar">consectetuer adipiscing elit</div>


$(".similar").highlight($('#source').text());