CODEWITHSUNDEEP
phphtmlstring
Imran Naqvi
Imran Naqvi

Reputation: 2232

Highlight piece of HTML code with matching text

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.

Upvotes: 2

Views: 935

Answers (2)

trejder
trejder

Reputation: 17505

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.

Upvotes: 3

Danny
Danny

Reputation: 468

By using JQuery you can add classes to elements like this...

The HTML:

<p id='myParagraph'>I need highlighting!</p>

The JQuery:

$(document).ready(function(){
    $('#myParagraph').addClass('highlight');
});

I would have a look at where you can put certain HTML elements, as it is not advisable to be putting things like div tags in p tags.

I hope this helps!

UPDATED

Okay, well you can use JQuery to wrap tags around your code.

If you need to remove the tags you can use PHP's strip tags function - this might help with comparing the text string without the HTML formatting - obviously will be done before the page has loaded in the browser. Not sure on a Javascript equivalent.

The wrap will allow you to get from your HTML to your Desired Output - That said, I would seriously consider the structure of your HTML to make sure it is the best it can be... might make life easier.

Upvotes: 2

Related Questions