与Regex JS模式混淆

Question

好的，我的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>

我需要做的是获取<code>块和html代码文本节点中的所有脚本，而不删除其中的html注释。这是我的教授给我的作业，我不能修改div块..

为此，我需要使用正则表达式，这就是我所做的

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 = "";

它真的不起作用。请不要给出确切的答案..请教我..。谢谢

我需要为变量code编写以下代码块

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

这就是我需要的变量html块

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

我的问题是，获得上述结果的正则表达式模式是什么？

Answer 1

首先，您应该意识到，因为HTML不是一种正则语言，所以不能使用适用于所有有效输入的正则表达式进行泛型解析(尤其是泛型嵌套不能用正则表达式表示)。许多解析器确实使用正则表达式来匹配单个标记，但需要围绕它们构建其他算法

但是，对于像这样的固定输入，只需要处理您已有的结构(尽管使用不同的解析方法通常比仅使用正则表达式更容易)。

首先让我们得到所有的代码：

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

我假设content包含您已经提取的div的内容。这里的"g“标志表示这是用于”全局“匹配，因此我们可以重用正则表达式来查找每个匹配。括号表示捕获组，.表示任何字符，*表示重复0次或更多次，?表示“非贪婪”(看看没有它会发生什么，看看它有什么作用)。

现在我们可以做类似的事情来获得所有其他部分，但这次的正则表达式稍微复杂一些：

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

这里|的意思是"or“。因此，这将匹配所有以“开始注释”或“结束代码”开头，以“结束注释”或“开始代码”结束的位。另请注意，我们现在有3组括号，所以我们要提取的部分是match[2] (第二组)。

Answer 2

使用正则表达式解析HTML不是您应该做的事情。

我敢肯定你的教授认为他/她真的很聪明，没有办法访问DOM，可以挥舞横幅，证明使用正则表达式解析DOM的一些小问题是合理的，有时这是可以的。

嗯，不，不是。如果你有复杂的代码，会发生什么？您的正则表达式中断了，如果它投入生产，可能会成为一种安全漏洞。

所以，这里：

http://jsfiddle.net/zfp6D/

1. 遍历dom，从节点中获取HTML8(注释)文本值。
2. 调用超文本标记语言解析器(浏览器用来解析超文本标记语言的东西，而不是正则表达式，我完全无法理解为什么你不使用超文本标记语言解析器来解析超文本标记语言，就像在说：“是啊，我可以用锤子钉钉子，但我想我只需要用脚踩钉子直到钉子进去”)。
3. 找到新解析的超文本标记语言中的所有代码元素。
4. 将它们记录到控制台中。或者你想用它们做什么。

Answer 3

你做了很多不必要的事情。.html()以字符串的形式给出内部内容。您应该能够使用regEx从那里准确地获取所需的内容。另外，尽量使用regEx字面值(例如/^regexstring$/)。您必须使用新的RegExp对转义字符进行转义，这会变得非常混乱。通常只在需要将字符串变量放入regEx中时才使用新的RegExp。

字符串的match函数接受regEx，并在添加全局标志时返回每个匹配项的集合(例如，/^regexstring$/g <--请注意'g')。我会这样做：

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