javascript - Regex to search html return, but not actual html jQuery -

I am creating a highlighting plugin for a client to find things in one page, and I think it's a support audience. Still building but I have a problem that would (maybe) need some regex.

I do not want to parse the HTML, and how I completely open it in a different way, it just looks best / correct.

Write something in search ... well, refresh the page, type now, like, class or class = " or type you will see that actual HTML (expected) How can I only search text?

If I do .text () then it will make all HTML steam and whatever I will get back to is just a big blob of text, but I still want the HTML so that I can convert the formatting, links, images Etc. to I want to do it like CMD / CTRL + F.

You will use this plugin in this way:

$ ('article'). Jhighlight ({Search: 'class'});

To remove them:

.jhighlight ('remove')

== UPDATE ==

While the idea of ​​Mike Samuel is given below, this plugin for a plug-in is heavy, it's mainly a customer For those words that are bad words and / or MS Word characters, a "publ Do not try to remove the "process. I'm looking for another light fix, any idea?

You do not really want to use Eval, mess with internal HTML or parse "manual" markup The best way to do this, in my opinion, is to keep a basic HTML cache to deal directly with text nodes and erase the highlight. Instant rewrite with comments:

  (function ($) {$ .fn.jhighlight = function (opt) {var options = $ .extend ($ .fn.jhighlight.defaults, opt) , TxtProp = this [0] .textcontent? 'TextContent': 'innerText'; if ($ .trim (options.find.length) & lt; 1) return it; it returns.each (function () {var self = $ (This); // Use cache to clear highlighting, if (self.data ('htmlcache')) self.data ('htmlcache', self.html ()); if (opt == = 'Remove') {Return self.html (self.data ('htmlcache')} // Create a tree walker // https://developer.mozilla.org/en/DOM/treeWalker var walker = document.createTreeWalker ( This, // only the target element NodeFilter.SHOW_TEXT, faucet, false); var Nodes, matches, flags = 'g' + (! Options.caseSensitive? 'I': ''), exp = new RegExp ('(+ + options (+), get flags) / capturing, exp split = new regepx (Option.paint, flag) // there is no capturing, highlights = []; // like this // save the nodes matched for the time and afterwards (node ​​= walker .nextNode ()) { If (matches = node.nodeValue. Match (XP)} {Highlights Push ([nodes, matches]); After the water has expired, the material will be replaced / else it will stop the walker for other nodes (var nn = 0, hln = highlights.length; nn & lt; hln; nn ++) {var node = highlights [Nn] [0], matches = highlights [nn] [1], parts = node. NadAVAsplit (Expiplit) divided on // matches, frag = document.createDocumentFragment (); // Temporary holder // text / highlight some of the parts between // like any .join (), but with elements :) (var i = 0, ln = parts.length; i & lt; ln; i + +) {// non-highlighted text if (parts [i] length) frag.appendChild (document.createTextNode (parts [i])); // Highlighted text // Skip the previous move if (i & lt; ln-1) {var h = document.createElement ('span'); H.className = options.className; H [txtProp] = match [i]; Frag.appendChild (h); }} // The original text node replaces node.parentNode.replaceChild (frag, node); }; }); }; $ .fn.jhighlight.defaults = {search: '', classname: 'jehlightlight', color: '#fff 77b', case sensitive: wrong, wrapping tag: 'spain'}; }) (JQuery);   
 If you are manipulating the page, you would want to replace the caching with another clean-up mechanism, though not trivial.  
 You can see the code working here:  
 You also need to add a display: block your new HTML elements, the layout is broken on some browsers.