Question

我需要使用正则表达式从javascript中收集文本中的所有链接，分离href的实际内容和链接的文本。所以如果链接是

<a href="someplace/topics/us/john.htm" class="r_lapi">John Dow</a>

我想收集href和“John Dow”的内容。

链接中有class =“r_lapi”，用于标识我正在寻找的链接。我现在拥有的是：

     var link_regex = new RegExp("/<a[^]*</a>/");
     var match = content.match(link_regex, 'i');
     console.log("match =", match );

绝对没有。非常感谢任何帮助。

Answer 1

如果你可以使用DOM（你说你想要正则表达式，但......）

var i;
var links = document.querySelectorAll("a.r_lapi");
for (i = 0; i < links.length; ++i) {
    // use `links[i].innerHTML` here
}

您在评论中说过，您正在尝试使用正则表达式执行此操作，因为您通过ajax接收了HTML链接（可能与其他一些东西混在一起）。您可以使用浏览器对其进行解析，然后使用断开连接的元素在解析后的结果中查找链接，而无需将HTML添加到文档中：

var div, links, i;

// Create an element; note we don't append it anywhere
div = document.createElement('div');

// Fill it in with the HTML
div.innerHTML = text;

// Find relevant links (same as the earlier example)
links = div.querySelectorAll("a.r_lapi");
for (i = 0; i < links.length; ++i) {
    // use `links[i].innerHTML` here
}

Live Example，使用通过ajax返回的此文本：

<a href="someplace/topics/us/john.htm" class="r_lapi">John Dow</a>
<a href="foo">Don't pick me</a>
<a href="blahblahblah" class="r_lapi">Jane Bloggs</a>

唯一真实的＆＃34;陷阱＆＃34;这里是如果HTML包含图像标签，浏览器将开始下载这些图像（即使它们不会在任何地方显示）。即使您使用文档片段也是如此，这是我没有打扰过的原因的一部分。（script标记在文本中不是问题，当您使用innerHTML时它们不会被执行，但要注意它们是由jQuery和＃39等执行的; s html函数。）

或者，如果数据以某种其他形式（如JSON）返回给您，其中包含HTML，则解析JSON（或其他），然后一次一个地运行每个HTML片段：

function handleLinks(data) {
  var div, links, htmlIndex, linkIndex;

  div = document.createElement('div');
  for (htmlIndex = 0; htmlIndex < data.htmlList.length; ++htmlIndex) {
    div.innerHTML = data.htmlList[htmlIndex];
    links = div.querySelectorAll("a.r_lapi");
    for (linkIndex = 0; linkIndex < links.length; ++linkIndex) {
      // Use `links[linkIndex].innerHTML` here
    }
  }
}

Live Example，使用通过ajax返回的JSON：

{
    "htmlList": [
        "blah blah <a href=\"someplace/topics/us/john.htm\" class=\"r_lapi\">John Dow</a> blah blah",
        "<a href=\"foo\">Don't pick me</a>",
        "Two in this one <a href=\"blahblahblah\" class=\"r_lapi\">Jane Bloggs</a> and <a href=\"blahblahblah\" class=\"r_lapi\">Trevor Bloggs</a>"
    ]
}

如果你真的需要使用正则表达式：

请注意无法使用JavaScript中的正则表达式可靠地执行此操作;你需要一个解析器。

你可以通过几个假设得到 close 。

 var link_regex = /<a(?:>|\s[^>]*>)(.*?)<\/a>/i;
 var match = content.match(link_regex);
 if (match) {
     // Use match[1], which contains it
 }

Live illustration

寻找这个：

文字<a
紧随其后的>，或至少一个空白字符，后跟任意数量的不是>的字符，后跟>
任意数量的字符，minimal-match
文字</a>

＆＃34;最小匹配＆＃34;在第3步中，如果我们<a>first</a><a>second</a>，我们就不会得到更多。

我还没有试图在课堂上限制正则表达式，我将其作为练习留给读者。： - ）

但是，这是一个坏主意。相反，使用DOM（如果您在浏览器之外执行此操作，则可以使用大量DOM实现）。

上面做出的一个主要假设是，在属性值内的锚中的属性值中不会有>个字符（例如，<a href="..." data-something="I have a > in me">John Dow></a>). It's perfectly valid to have a＆gt;`，因此假设无效。

Answer 2

如果你在浏览器中，那么你真的应该使用原生DOM。

如果你不是，假设href不包含奇怪的字符，如>或"，你可以使用以下正则表达式：

var matches = link.match(/^<a\s+[^>]*href="([^"]+)"[^>]*>([^<]*)<\/a>$/);
matches[1] == "someplace/topics/us/john.htm";
matches[2] == "John Dow";

请注意，某些链接（如

）会失败

<a href=">">test</a>
<a href="test">John <b>Dow</b></a>

要获得完整的解决方案，请使用HTML解析器。

javascript正则表达式链接和链接类

2 个答案: