Question

I need to find text in html and highlight that html without corrupting html itself which i being highlighted.

Text to Replace:

This is text 2. This is Text 3.

HTML:

This is text 1. <p>
This is <span>Text 2</span>. This <div>is</div> text 3.
</p> This is Text 4.

Desired Output:

This is text 1.<p>
<strong class="highlight">This is <span>Text 2</span>. This <div>is</div> text 3. </strong>
</p> This is Text 4.

EDIT: Sorry, if I was not able to explain properly.

I need to highlight a portion of html document (in php or javascript) if string i am searching matches to text in HTML.

But remember that the string i am searching my not be identical to search string, it may contain some extra HTML.

For example if i am searching for this string “This is text.“, it should be matched with “This is text.”, “<anyhtmltag>This</anyhtmltag> is text.”, “This <anyhtmltag>is</anyhtmltag> text.”, “This<anyhtmltag> is text</anyhtmltag>.” and so on.

Answer 1

You need to be more specific, if you want to achieve this by either server-side (using PHP for example and returning to browser a HTML code already containing highlighted output) or client-side (using a jQuery for example to find and highlight something in HTML returned by server)?

It seems to me, that you just asked a question, without doing nothing (like searching the net), as finding proper solution for jQuery (client-side) took me around TEN seconds! And three most important search results were on StackExchange and jQuery documentation itself.

Find text using jQuery?

Find text string using jQuery?

jQuery .wrap() function description

Here is an example in a very brief:

<script>
     $('div:contains("This is <span>Text 2</span>. This <div>is</div> text 3")')wrap("<strong class="highlight"></strong>");
</script>

It generally finds, what you want to find and wraps it with what you want it to be wrapped with.

This works, when the text you want to find is inside some div, that is why, I used $('div:contains. If you want to search whole page, you can use $('*:contains instead.

This is example for jQuery and client-side highlighting. For PHP (server-side) version, do some little searching on either Google or StackOverflow and you’ll for sure find many examples.

EDIT: As for your updated question. If you are using any textbox to put there, what you want to search, you can of course use something like this:

<script>
    $("#mysearchbox").change(
    {
        $('div:contains($("#mysearchbox")').wrap("<strong class="highlight"></strong>");
    });
</script>

and define your search box somewhere else for example like this:

<input id="mysearchbox"></input>

This way, you’re attaching an onChange event to your search box, that will be fired anytime you type anything to it and that should find (and highlight) anything you entered.
Note that this examples are from-hand (from memory). I don’t have access do jQuery from where I’m writing, so I can’t check, if there aren’t any mistakes, in what I’ve just wrote. You need to test it yourself.