Using Javascript RegExp to highlight a search term in innerHTML

Posted on 2009-12-17
Last Modified: 2012-05-08

I have a search results page where I would like to highlight the search term where it appears within the page.

I have placed the search results within a div tag with id so can reference this, do a regexp and it works fine but I need to exclude all html/xml tags from the function. Can anyone help with this.

So far I have the following which works but if the search term was 'able' this would trash all table tags!

Note: The search term is being generated dynamically so I have entered the static string of Able as a demonstration.

var str = document.getElementById('srchresult').innerHTML;
document.getElementById('srchresult').innerHTML = str.replace(/Able/gi, "<strong style='color:#CC0000'>Able</strong>");

Question by:Lmillard
    LVL 40

    Expert Comment

    Can you try this

    var myArray = str.replace(/[^a-z]*(able)/m,"<Str>able</Str>")

    Let me know if this helps
    LVL 22

    Accepted Solution


    Author Comment

    Hi, sorry this didn't work, it still messes with text between the <> chars.
    LVL 40

    Expert Comment

    Given that
    var str = document.getElementById('srchresult').innerHTML;
    Why dont you take str as a xml and parse it using XML DOM, and then only take values from it and make it <strong>?

    You can use the following link for reference

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Free Trending Threat Insights Every Day

    Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

    Whatever be the reason, if you are working on web development side,  you will need day-today validation codes like email validation, date validation , IP address validation, phone validation on any of the edit page or say at the time of registration…
    Accessibility and Usability are two concepts that seem to be closely related.  But, too many people seem to have a distorted perception of them. During last five years, those two words have come to the day-to-day work of almost every web develope…
    Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
    The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    13 Experts available now in Live!

    Get 1:1 Help Now