Question

我试图理解这段代码：

function extractLinks(input) {
    var html = input.join('\n');
    var regex = /<a\s+([^>]+\s+)?href\s*=\s*('([^']*)'|"([^"]*)|([^\s>]+))[^>]*>/g;
    var match;
    while (match = regex.exec(html)) {
        var hrefValue = match[3];
        if (hrefValue == undefined) {
            var hrefValue = match[4];
        }
        if (hrefValue == undefined) {
            var hrefValue = match[5];
        }
        console.log(hrefValue);
    }
}

无论如何，这是一个简单的函数，它提取所有 href值，但仅提取这些，它们是真实的href，例如不包括定义为class="href"的href或A标签外的href等。关于这一切的奇怪之处在于，我为此计算创建的regex是的 (<a[\s\S]*?>) 但是当我没有设法找到解决方案并查看原始解决方案时，我发现这很长regex。用我的regex尝试了这个解决方案，它不会工作。

可以，有人解释，我怎么能解释这个长regex。然后，匹配返回一个数组，好吧。让我看看如果我在循环中得到这个想法：

while（match =正则表达式出现在字符串中）{ something = match [3] / 为什么3 ??? / 如果未定义的东西=匹配[4]，如果未定义，则= something = match [5]; }

我真的很难理解所有这些背后的机制，以及regex中的逻辑。

输入是由一个系统生成的，它将解析10个不同的字符串数组，但我们可以选择一个，我用它来测试：下面的代码被解析为字符串数组，长度为行，每行是数组中的一个单独元素，这是函数的参数输入。

<!DOCTYPE html>
<html>
<head>
  <title>Hyperlinks</title>
  <link href="theme.css" rel="stylesheet" />
</head>
<body>
<ul><li><a   href="/"  id="home">Home</a></li><li><a
 class="selected" href=/courses>Courses</a>
</li><li><a href = 
'/forum' >Forum</a></li><li><a class="href"
onclick="go()" href= "#">Forum</a></li>
<li><a id="js" href =
"javascript:alert('hi yo')" class="new">click</a></li>
<li><a id='nakov' href =
http://www.nakov.com class='new'>nak</a></li></ul>
<a href="#empty"></a>
<a id="href">href='fake'<img src='http://abv.bg/i.gif' 
alt='abv'/></a><a href="#">&lt;a href='hello'&gt;</a>
<!-- This code is commented:
  <a href="#commented">commentex hyperlink</a> -->
</body>

Answer 1

为了解这个正则表达式的作用，我在this page中添加了您可以查看的内联注释。我也在这里复制它：

<a\s+            # Look for '<a' followed by whitespace
([^>]+\s+)?      # Look for anything else that isn't 'href='
                 # such as 'class=' or 'id='
href\s*=\s*      # locate the 'href=' with any whitespace around the '=' character
(
  '([^']*)'      # Look for '...'
|                # ...or...
  "([^"]*)       # Look for "..."
|                # ...or...
  ([^\s>]+)      # Look anything NOT '>' or spaces
)
[^>]*>           # Match anything else up to the closing '>'

这只是为了将它分开，以便您可以看到每个部分正在做什么。至于您对match的问题，我并不完全理解您的问题。

JS从字符串数组中提取特定字符串

1 个答案: