Question

Hi here is my total work to search a string in HTML and highlight it if it is found in document:
The problem is here

var SearchItems = text.split(/\r\n|\r|\n/);
   var replaced = body.html();
   for(var i=0;i<SearchItems.length;i++)
   {
     var tempRep= '<span class="highlight" style="background-color: yellow">';
     tempRep = tempRep + SearchItems[i];
     tempRep = tempRep + '</span>';
     replaced = replaced.replace(SearchItems[i],tempRep); // It is trying to match along with html tags...
     // As the <b> tags will not be there in search text, it is not matching...
   }
$("body").html(replaced);

The HTML I’m using is as follows;

<div>
The clipboardData object is reserved for editing actions performed through the Edit menu, shortcut menus, and shortcut keys. It transfers information using the system clipboard, and retains it until data from the next editing operation replace s it. This form of data transfer is particularly suited to multiple pastes of the same data.
<br><br>
This object is available in script as of <b>Microsoft Internet Explorer 5.</b>
</div>

<div class='b'></div>

If I search for a page which is pure or without any html tags it will match. However, if I have any tags in HTML this will not work.. Because I am taking body html() text as the target text. It is exactly trying to match along with html tags..

In fiddle second paragraph will not match.

Answer 1

First of all, to ignore the HTML tags of the element to look within, use the .text() method.

Secondly, in your fiddle, it wasn’t working because you weren’t calling the SearchQueue function on load.

Try this amended fiddle