Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium


Using Javascript RegExp to highlight a search term in innerHTML

Posted on 2009-12-17
Medium Priority
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
  • 2
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 26070446
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

kadaba earned 2000 total points
ID: 26070466

Author Comment

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

Expert Comment

by:Gurvinder Pal Singh
ID: 26070648
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

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
How do you create a user-centered user experience on your website? And what are some things you should consider in the process?
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month12 days, 13 hours left to enroll

578 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