Confused with Regex JS pattern

Question

ok i do have this following data in my div

<div id="mydiv">
<!--
 what is your present
 <code>alert("this is my present");</code>
 where?
 <code>alert("here at my left hand");</code>
 oh thank you! i love you!! hehe
  <code>alert("welcome my honey ^^");</code>
-->
</div>

well what i need to do there is to get the all the scripts inside the <code> blocks and the html codes text nodes without removing the html comments inside. well its a homework given by my professor and i can't modify that div block..

I need to use regular expressions for this and this is what i did

var block = $.trim($("div#mydiv").html()).replace("<!--","").replace("-->","");
var htmlRegex = new RegExp(""); //I don't know what to do here
var codeRegex = new RegExp("^<code(*n)</code>$","igm");

var code = codeRegex.exec(block);
var html = "";

it really doesn't work... please don't give the exact answer.. please teach me.. thank you

I need to have the following blocks for the variable code

alert("this is my present");
alert("here at my left hand");
alert("welcome my honey ^^");

and this is the blocks i need for variable html

 what is your present
     where?
     oh thank you! i love you!! hehe

my question is what is the regex pattern to get the results above?

Answer 1

Parsing HTML with a regular expression is not something you should do.

I'm sure your professor thinks he/she was really clever and that there's no way to access the DOM API and can wave a banner around and justify some minor corner-case for using regex to parse the DOM and that sometimes it's okay.

Well, no, it isn't. If you have complex code in there, what happens? Your regex breaks, and perhaps becomes a security exploit if this is ever in production.

So, here:

http://jsfiddle.net/zfp6D/

1. Walk the dom, get the nodeType 8 (comment) text value out of the node.
2. Invoke the HTML parser (that thing that browsers use to parse HTML, rather than regex, why you wouldn't use the HTML parser to parse HTML is totally beyond me, it's like saying "Yeah, I could nail in this nail with a hammer, but I think I'm going to just stomp on the nail with my foot until it goes in").
3. Find all the CODE elements in the newly parsed HTML.
4. Log them to console, or whatever you want to do with them.

Answer 2

First of all, you should be aware that because HTML is not a regular language, you cannot do generic parsing using regular expressions that will work for all valid inputs (generic nesting in particular cannot be expressed with regular expressions). Many parsers do use regular expressions to match individual tokens, but other algorithms need to be built around them

However, for a fixed input such as this, it's just a case of working through the structure you have (though it's still often easier to use different parsing methods than just regular expressions).

First lets get all the code:

var code = '', match = [];
var regex = new RegExp("<code>(.*?)</code>", "g");
while (match = regex.exec(content)) {
    code += match[1] + "\n";
}

I assume content contains the content of the div that you've already extracted. Here the "g" flag says this is for "global" matching, so we can reuse the regex to find every match. The brackets indicate a capturing group, . means any character, * means repeated 0 or more times, and ? means "non-greedy" (see what happens without it to see what it does).

Now we can do a similar thing to get all the other bits, but this time the regex is slightly more complicated:

new RegExp("(<!--|</code>)(.*?)(-->|<code>)", "g")

Here | means "or". So this matches all the bits that start with either "start comment" or "end code" and end with "end comment" or "start code". Note also that we now have 3 sets of brackets, so the part we want to extract is match[2] (the second set).

Answer 3

You're doing a lot of unnecessary stuff. .html() gives you the inner contents as a string. You should be able to use regEx to grab exactly what you need from there. Also, try to stick with regEx literals (e.g. /^regexstring$/). You have to escape escape characters using new RegExp which gets really messy. You generally only want to use new RegExp when you need to put a string var into a regEx.

The match function of strings accepts regEx and returns a collection of every match when you add the global flag (e.g. /^regexstring$/g <-- note the 'g'). I would do something like this:

var block = $('#mydiv').html(), //you can set multiple vars in one statement w/commas
matches = block.match(/<code>[^<]*<\/code>/g);

//[^<]* <-- 0 or more characters that aren't '<' - google 'negative character class'

matches.join('_') //lazy way of avoiding a loop - join into a string with a safe character
.replace(/<\/*code>/g,'') //\/* 0 or more forward slashes
.split('_');//return the matches string back to array

//Now do what you want with matches. Eval (ew) or append in a script tag (ew).
//You have no control over the 'ew'. I just prefer data to scripts in strings