RegEx-如何解析 html 页面的模式（在 JavaScript 中）答案

【问题标题】：RegEx-how to parse html page for pattern (in JavaScript)RegEx-如何解析 html 页面的模式（在 JavaScript 中）
【发布时间】：2009-05-22 18:36:51
【问题描述】：

我需要解析 html 页面的模式。我假设匹配被加载到一个数组中。然后我需要输出数组的内容。

<script language="JavaScript" type="text/javascript">
var adBookmarkletData=[
'<html><head><title>MYSA Yahoo! APT Debugger</title></head><body><center><div style=\"background:#ccc;color:#000;width:350px;text-align:left;padding:15px;border:2px #000;\">','<b>MYSA Yahoo! APT Debugger:</b><br /><hr />',
'<b>URL:</b> '+document.location.href+'<br />',
'<b>Pub ID:</b> '+window.yld_mgr.pub_id+'<br />',
'<b>Site Name:</b> '+window.yld_mgr.site_name+'<br />',
'<b>Content Topic ID List:</b> '+window.yld_mgr.content_topic_id_list+'<br />',
'<b>Site Section Name List:</b> '+window.yld_mgr.site_section_name_list+'<br />'
];
for(i in window.yld_mgr.slots){
    adBookmarkletData.push('<b>Ad:</b> ('+i+')<b>Category:</b>('+window.yld_mgr.slots[i].cstm_content_cat_list+')<br />');
    };
//Here my problem starts
    var myRegExp = new RegExp("place_ad_here\('(.*?)'\)");
//Here my Problem ends
adBookmarkletData.push(myRegExp.exec(document.innerHTML));

adBookmarkletData.push('</div></center></body></html>');
function createAptDebugger(){
   for (i in adBookmarkletData){
    document.write(adBookmarkletData[i]);
    }
};
void(createAptDebugger());
</script>

RegEx 模式适用于针对示例代码的在线测试器。但是这里的结果是空的。 我不知道如何将 RegEx 指向 html 页面，然后将其从数组中输出。

为清楚起见，html 将在正文中包含这样的标签。

<script type="text/javascript">yld_mgr.place_ad_here('A728');</script>
<script type="text/javascript">yld_mgr.place_ad_here('ASPON120');</script>
<script type="text/javascript">yld_mgr.place_ad_here('ROLLOVER');</script>
<script type="text/javascript">yld_mgr.place_ad_here('A300');</script>
<script type="text/javascript">yld_mgr.place_ad_here('Middle1');</script>
<script type="text/javascript">yld_mgr.place_ad_here('B300');</script>

结果如下所示：

place_ad_here('A728')
place_ad_here('ASPON120')
place_ad_here('ROLLOVER')
place_ad_here('A300')
place_ad_here('Middle1')
place_ad_here('B300')

这就是我想要显示它们的方式。

提前谢谢...

【问题讨论】：

标签： javascript html regex

【解决方案1】：

您的正则表达式中缺少 g 标志。这将允许多重匹配。

这就是你想要的

Array.prototype.push.apply( adBookmarkletData
              , document.innerHTML.match( /place_ad_here\('[^']+'\)/g ) ) ;

如果您使用全局 g 标志，

string.match 将返回一个包含所有匹配项的数组。另外，由于 push 只接受参数列表，因此 apply 用于传递参数。

【讨论】：

【解决方案2】：

请注意，soitgoes 和 Laurent 都推荐或使用文字正则表达式分隔符 (//)。您的 RegExp 不起作用 b/c 您正在转义传递给 RegExp 构造函数的字符串中的括号。您需要对它们进行双重转义。

new RegExp("place_ad_here\\('(.*?)'\\)","g")

这就是为什么我更喜欢文字正则表达式并且只在我需要在运行时构造正则表达式时使用 RexExp。

除此之外，Laurent 的回答应该可以满足您的要求。他只是使用了一个稍微不同的正则表达式。 [^']+ 与 (.*)？两者都应该适用于您所描述的文本。

如果您想在末尾保留换行符（每行 1 个）的输出，您可以使用替换而不是匹配并相应地调整您的正则表达式。

最后一点：如果输入类似

，您的匹配和/或替换会变得更加复杂

<script type="text/javascript">yld_mgr.place_ad_here('A728');</script>

跨越多于一行或place_ad_here 曾经采用m一个以上的参数，因此请确保您了解输入的所有可能变化。 :)

【讨论】：

【解决方案3】：

我相信你拥有它的方式只会匹配第一场比赛......我相信你需要做这样的事情......

while ( var match = myRegExp.exec(document.innerHTML)){
   adBookmarkletData.push(match);
}

【讨论】：

另外请记住，在 javascript 中，您可以只使用 RegEx 分隔符而不是构造函数。 /place_ad_here('(.*?)')/ 而不是 new Regexp()
所以我尝试了soitgoes的建议。但没有喜悦。它给了我一个语法错误。 var myRegExp = new RegExp("place_ad_here('(.*?)')"); while ( var match = myRegExp.exec(document.innerHTML)){ adBookmarkletData.push(match); };
对不起，我没有运行这个例子。修复语法错误，看看会发生什么