Javascript match() 函数返回完全匹配的标签

Question

console.log( html.match( /<a href="(.*?)">[^<]+<\/a>/g ));

而不是只返回如下网址：

http://google, http://yahoo.com

它返回整个标签：

<a href="http://google.com">Google.com</a>, <a href="http://yahoo.com">Yahoo.com</a>

为什么会这样？

Answer 1

您需要RegExp#exec 和一个循环访问匹配结果的1 索引处的元素，而不是String.match。当有 g 标志时，String.match 不返回捕获组，只是每个匹配项的索引 0 处的元素数组，这是整个匹配字符串。 （参见the spec 的第 15.5.4.10 节。）

所以本质上：

var re, match, html;

re = /<a href="(.*?)">[^<]+<\/a>/g;
html = 'Testing <a href="http://yahoo.com">one two three</a> <a href="http://google.com">one two three</a> foo';

re.lastIndex = 0; // Work around literal bug in some implementations
for (match = re.exec(html); match; match = re.exec()) {
  display(match[1]);
}

Live example

但这是用正则表达式解析 HTML。 这里有龙。

---

更新 re dragons，这里有一个快速列表，可以打败这个正则表达式，我想不到：

1. a 和 href 之间除了一个空格之外的任何其他内容，例如 两个 空格而不是一个、换行符、class='foo' 等，等等。
2. 在href 属性周围使用单引号而不是双引号。
3. 根本没有在href 属性周围使用引号。

4. href 属性之后也使用双引号的任何内容，例如：

   <a href="http://google.com" class="foo">
   

这不是你的正则表达式，它只是为了强调正则表达式不能可靠地单独使用来解析 HTML。它们可以构成解决方案的一部分，帮助您扫描令牌，但它们不能可靠地完成整个工作。

Answer 2

虽然您确实无法使用正则表达式可靠地 _解析_ HTML，但这不是 OP 所要求的。

相反，OP 需要一种从 HTML 文档中提取锚链接的方法，该方法可以使用正则表达式轻松且出色地处理。

上一个回复者列出的四个问题中：

1. 锚的各个部分之间有多个空格
2. 使用单引号而不是双引号
3. 根本不使用引号来分隔 href 属性
4. 具有除 href 之外的其他前导或尾随属性

只有数字 3 对 single 正则表达式解决方案提出了重大问题，但也恰好是完全不应该出现在 HTML 文档中的非标准 HTML。 （请注意，如果您发现 HTML 包含非分隔标记属性，则有一个正则表达式将匹配它们，但我认为它们不值得提取。YMMV - 您的里程可能会有所不同。）

要使用正则表达式从 HTML 中提取锚链接 (hrefs)，您可以使用以下正则表达式（以注释形式）：

<          # a literal '<'
a          # a literal 'a'
[^>]+?     # one or more chars which are not '>' (non-greedy)
href=      # literal 'href='
('|")      # either a single or double-quote captured into group #1
([^\1]+?)  # one or more chars that are not the group #1, captured into group #2
\1         # whatever capture group #1 matched

没有 cmets 是：

<a[^>]+?href=('|")([^\1]+?)\1

（请注意，我们不需要匹配任何超出最终分隔符的内容，包括标记的其余部分，因为我们只对锚链接感兴趣。）

在 JavaScript 中并假设“源”包含您希望从中提取锚链接的 HTML：

var source='<a href="double-quote test">\n'+
           '<a href=\'single-quote test\'>\n'+
           '<a class="foo" href="leading prop test">\n'+
           '<a    href="trailing prop test"   class="foo">\n'+
           '<a style="bar" link="baz" '+
                'name="quux" '+
                'href="multiple prop test" class="foo">\n'+
           '<a class="foo"\n href="inline newline test"\n style="bar"\n />';

当打印到控制台时，内容如下：

<a href="double-quote test">
<a href='single-quote test'>
<a class="foo" href="leading prop test">
<a    href="trailing prop test"   class="foo">
<a style="bar" link="baz" name="quux" href="multiple prop test" class="foo">
<a class="foo" 
 href="inline newline test"
 style="bar"
 />

你会写如下：

var RE=new RegExp(/<a[^>]+?href=('|")([^\1]+?)\1/gi),
    match;

while(match=RE.exec(source)) {
    console.log(match[2]);
}

它将以下行打印到控制台：

double-quote test
single-quote test
leading prop test
trailing prop test
multiple prop test
inline newline test

注意事项：

1. 在 nodejs v0.5.0-pre 中测试的代码，但应该在任何现代 JavaScript 下运行。

2. 由于正则表达式使用捕获组 #1 来标注前导分隔引号，因此生成的链接出现在捕获组 #2 中。

3. 您可能希望使用以下方法验证匹配的存在、类型和长度：

   
   if(match && typeof match === 'object' && match.length > 1) {
       console.log(match[2]);
   }
   

   但它确实没有必要，因为 RegExp.exec() 在失败时返回“null”。另请注意，正确的 typeof 匹配项是“object”，而不是“Array”。