Highlight similar text using jquery

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());

score 4 · Answer 1 · answered Sep 11 '12 at 15:39

4

.val() should be used only on input fields such as text field, drop downs, e.t.c.

You should use .text() or .html() to get the content of elements like div/span/e.t.c

Try below,

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

answered Sep 11 '12 at 15:39

Selvakumar Arumugam

79,297
15
120
134

score 2 · Accepted Answer · answered Sep 11 '12 at 15:40

2

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());

answered Sep 11 '12 at 15:40

Chris

4,255
7
42
83

score 0 · Answer 3 · answered Sep 11 '12 at 15:41

You can select multiple elements at once.

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

You can also use .text() to get the text contents of your div.

$("#similar1, #similar2").highlight($("#source").text());

Highlight similar text using jquery

3 Answers3