从 HTML 正文标签中的 <li> 检索超链接值？

Question

我需要通过正则表达式获取 HTML body 标签中的 href 值

<html>
    <head>
  </head>
  <body class="directory">
    <input id="search" type="text" placeholder="Search" autocomplete="off" />
    <div id="wrapper">
      <h1><a href="/">~</a> / <a href="/public">public</a> / <a href="/public/img">img</a> / <a href="/public/img/events">events</a> / <a href="/public/img/events/poster">poster</a> / </h1>
      <ul id="files" class="view-tiles"><li><a href="/public/img/events" class="" title=".."><span class="name">..</span><span class="size"></span><span class="date"></span></a></li>
<li><a href="/public/img/events/poster/2018-09-26-1.PNG" class="" title="2018-09-26-1.PNG"><span class="name">2018-09-26-1.PNG</span><span class="size">1406471</span><span class="date">2018-9-16 18:37:23</span></a></li>
<li><a href="/public/img/events/poster/2018-09-26-2.PNG" class="" title="2018-09-26-2.PNG"><span class="name">2018-09-26-2.PNG</span><span class="size">530859</span><span class="date">2018-9-16 18:37:44</span></a></li>
<li><a href="/public/img/events/poster/2018-09-26-3.PNG" class="" title="2018-09-26-3.PNG"><span class="name">2018-09-26-3.PNG</span><span class="size">551409</span><span class="date">2018-9-16 18:38:24</span></a></li>
<li><a href="/public/img/events/poster/test" class="" title="test"><span class="name">test</span><span class="size">0</span><span class="date">2018-10-4 20:16:58</span></a></li></ul>
    </div>
  </body>
<html>

我想要一个包含

的列表

/public/img/events/poster/2018-09-26-1.PNG and 
/public/img/events/poster/2018-09-26-2.PNG and
/public/img/events/poster/2018-09-26-3.PNG.

我使用的表达式：

/[<body\sclass="directory">].+[<li><a\shref\s*=\s*\"]([^">]+)\"\s+[class].+[<\/body>]/g

然而我得到的结果是：

<ul id="files" class="view-tiles"><li><a href="/public/img/events" class="" title=".."><span class="name">..</span><span class="size"></span><span class="date"></span></a></li>

<li><a href="/public/img/events/poster/2018-09-26-1.PNG" class="" title="2018-09-26-1.PNG"><span class="name">2018-09-26-1.PNG</span><span class="size">1406471</span><span class="date">2018-9-16 18:37:23</span></a></li>

<li><a href="/public/img/events/poster/2018-09-26-2.PNG" class="" title="2018-09-26-2.PNG"><span class="name">2018-09-26-2.PNG</span><span class="size">530859</span><span class="date">2018-9-16 18:37:44</span></a></li>

<li><a href="/public/img/events/poster/2018-09-26-3.PNG" class="" title="2018-09-26-3.PNG"><span class="name">2018-09-26-3.PNG</span><span class="size">551409</span><span class="date">2018-9-16 18:38:24</span></a></li>

<li><a href="/public/img/events/poster/test" class="" title="test"><span class="name">test</span><span class="size">0</span><span class="date">2018-10-4 20:16:58</span></a></li></ul>

有人可以指导我吗？

Answer 1

一定要是正则表达式吗？此解决方案似乎有效。

const links = document.querySelectorAll('#files a');
  links.forEach(link => {
    console.log(link.getAttribute('href'));
  })

Answer 2

您可以使用这个正则表达式：

/<li[^>]*>[^<]*<a[^>]*href="([^"]+)"/g

然后通过调用 match[1] 访问 href="([^"]+) 捕获组，如下所示（假设您使用的是 javascript）：

    var myString = `<html>
    <head>
  </head>
  <body class="directory">
    <input id="search" type="text" placeholder="Search" autocomplete="off" />
    <div id="wrapper">
      <h1><a href="/">~</a> / <a href="/public">public</a> / <a href="/public/img">img</a> / <a href="/public/img/events">events</a> / <a href="/public/img/events/poster">poster</a> / </h1>
      <ul id="files" class="view-tiles"><li><a href="/public/img/events" class="" title=".."><span class="name">..</span><span class="size"></span><span class="date"></span></a></li>
<li><a href="/public/img/events/poster/2018-09-26-1.PNG" class="" title="2018-09-26-1.PNG"><span class="name">2018-09-26-1.PNG</span><span class="size">1406471</span><span class="date">2018-9-16 18:37:23</span></a></li>
<li><a href="/public/img/events/poster/2018-09-26-2.PNG" class="" title="2018-09-26-2.PNG"><span class="name">2018-09-26-2.PNG</span><span class="size">530859</span><span class="date">2018-9-16 18:37:44</span></a></li>
<li><a href="/public/img/events/poster/2018-09-26-3.PNG" class="" title="2018-09-26-3.PNG"><span class="name">2018-09-26-3.PNG</span><span class="size">551409</span><span class="date">2018-9-16 18:38:24</span></a></li>
<li><a href="/public/img/events/poster/test" class="" title="test"><span class="name">test</span><span class="size">0</span><span class="date">2018-10-4 20:16:58</span></a></li></ul>
    </div>
  </body>
<html>`;

var myRegexp = /<li[^>]*>[^<]*<a[^>]*href="([^"]+)"/g;
match = myRegexp.exec(myString);
while (match != null) {
  // matched text: match[0]
  // match start: match.index
  // capturing group n: match[n]
  console.log(match[1])
  match = myRegexp.exec(myString);
}

代码示例归功于 this answer。

更新 1

作者要求包含正文标签的匹配项

Just curious. How do i update the express if i want to limit mapping range in tag? I update the express as belows but no result. ]>.]>[^<]]href="([^"]+)".</body[^>]*>

正则表达式只能做这么多，通常不建议使用正则表达式进行高级 html 解析。您的方法给您带来了换行符问题以及您想在一个主体中匹配多个 li 的事实。此外，根据 HTML 约定，<li> 只能出现在正文中。

如果您想这样做，请将其分为两步并匹配

    var myString = `<html>
    <head>
    <!-- Not valid HTML, just for testing -->
    <ul id="files" class="view-tiles"><li><a href="/public/img/events" class="" title=".."><span class="name">..</span><span class="size"></span><span class="date"></span></a></li>
    <li><a href="/public/img/events/poster/2018-09-26-1.PNG" class="" title="2018-09-26-1.PNG"><span class="name">2018-09-26-1.PNG</span><span class="size">1406471</span><span class="date">2018-9-16 18:37:23</span></a></li>
    <li><a href="/public/img/events/poster/2018-09-26-2.PNG" class="" title="2018-09-26-2.PNG"><span class="name">2018-09-26-2.PNG</span><span class="size">530859</span><span class="date">2018-9-16 18:37:44</span></a></li>
    <li><a href="/public/img/events/poster/2018-09-26-3.PNG" class="" title="2018-09-26-3.PNG"><span class="name">2018-09-26-3.PNG</span><span class="size">551409</span><span class="date">2018-9-16 18:38:24</span></a></li>
    <li><a href="/public/img/events/poster/test" class="" title="test"><span class="name">test</span><span class="size">0</span><span class="date">2018-10-4 20:16:58</span></a></li></ul>
  </head>
  <body class="directory">
    <input id="search" type="text" placeholder="Search" autocomplete="off" />
    <div id="wrapper">
      <h1><a href="/">~</a> / <a href="/public">public</a> / <a href="/public/img">img</a> / <a href="/public/img/events">events</a> / <a href="/public/img/events/poster">poster</a> / </h1>
      <ul id="files" class="view-tiles"><li><a href="/public/img/events" class="" title=".."><span class="name">..</span><span class="size"></span><span class="date"></span></a></li>
<li><a href="/public/img/events/poster/2018-09-26-1.PNG" class="" title="2018-09-26-1.PNG"><span class="name">2018-09-26-1.PNG</span><span class="size">1406471</span><span class="date">2018-9-16 18:37:23</span></a></li>
<li><a href="/public/img/events/poster/2018-09-26-2.PNG" class="" title="2018-09-26-2.PNG"><span class="name">2018-09-26-2.PNG</span><span class="size">530859</span><span class="date">2018-9-16 18:37:44</span></a></li>
<li><a href="/public/img/events/poster/2018-09-26-3.PNG" class="" title="2018-09-26-3.PNG"><span class="name">2018-09-26-3.PNG</span><span class="size">551409</span><span class="date">2018-9-16 18:38:24</span></a></li>
<li><a href="/public/img/events/poster/test" class="" title="test"><span class="name">test</span><span class="size">0</span><span class="date">2018-10-4 20:16:58</span></a></li></ul>
    </div>
  </body>
<html>`;

var bodyRegex = /<\s*body.*>([\s\S]*)<\s*\/body>/g;
var bodyString = bodyRegex.exec(myString)[0];

var myRegexp = /<li[^>]*>[^<]*<a[^>]*href="([^"]+)"/g;
match = myRegexp.exec(bodyString);
while (match != null) {
  // matched text: match[0]
  // match start: match.index
  // capturing group n: match[n]
  console.log(match[1])
  match = myRegexp.exec(bodyString);
}

从 HTML 正文标签中的 <li> 检索超链接值？

Retrieve hyperlink value from <li> in HTML body tag?

html

javascript

regular-language

node.js

更新 1