使用 JavaScript 中的正则表达式从锚标记字符串中提取内部文本

Question

我是 Angular js 的新手。我有regex，它得到了所有anchor tags。我的正则表达式是

/<a[^>]*>([^<]+)<\/a>/g

我在这里使用match 函数，例如，

var str =  '<a href="mailto:abc.jagadale@gmail.com" style="color:inherit;text-decoration:inherit">abc.jagadale@gmail.com</a>'

所以现在我使用像

这样的代码

var value = str.match(/<a[^>]*>([^<]+)<\/a>/g);

所以，在这里我希望输出为 abc.jagadale@gmail.com ，但我得到的字符串与 input string 完全相同。有人可以帮我吗？提前致谢。

Answer 1

你为什么要重新发明轮子？

您正在尝试使用正则表达式解析 HTML 字符串，这将是一项非常复杂的任务，只需使用 DOM 或 jQuery 来获取链接内容，它们就是为此而生的。

• 将 HTML 字符串作为 jQuery/DOM 元素的 HTML。

• 然后获取这个创建的 DOM 元素以获取所有 a 元素 在其中并以数组的形式返回它们的内容。

这应该是你的代码：

var str = '<a href="mailto:abc.jagadale@gmail.com" style="color:inherit;text-decoration:inherit">abc.jagadale@gmail.com</a>';

var results = [];
$("<div></div>").html(str).find("a").each(function(l) {
  results.push($(this).text());
});

演示：

var str = '<a href="mailto:abc.jagadale@gmail.com" style="color:inherit;text-decoration:inherit">abc.jagadale@gmail.com</a>';

var results = [];
$("<div></div>").html(str).find("a").each(function(l) {
  results.push($(this).text());
});
console.log(results);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

您需要捕获锚标记内的组。正则表达式已经匹配内部组([^<]+) 但是，在匹配时有不同的方法来提取该内部文本。

当使用 Match 函数时，它将返回一个匹配元素的数组，第一个匹配整个正则表达式，后面的元素将匹配正则表达式中包含的组。

试试这个：

var reg = /<a[^>]*>([^<]+)<\/a>/g

reg.exec(str)[1]

只有当 g 标志不存在时 match 函数才会返回一个数组。

查看https://javascript.info/regexp-groups 以获取更多文档。

Answer 3

简介

不要为此使用正则表达式。正则表达式是一个很棒的工具，不要误会我的意思，但这不是您要找的。 Regex cannot properly parse HTML 并且仅当它是 有限、已知 HTML 集 时才应使用。

例如，尝试将content:">" 添加到您的style 属性。您会看到您的模式现在失败或给您一个不正确的结果。我不喜欢一直用this quote，但我觉得这种情况下还是有必要用的：

有些人在遇到问题时会想“我知道，我会用 正则表达式。”现在他们有两个问题。

使用内置函数。 jQuery 使这非常容易完成。请参阅我的 代码 部分进行演示。它比任何正则表达式变体都更清晰。

---

代码

来自页面的 DOM

下面的 sn -p 获取实际页面上的所有锚点。

$("a").each(function() {
  console.log($(this).text())
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="mailto:abc.jagadale@gmail.com">abc.jagadale@gmail.com</a>
<a href="mailto:abc2.jagadale@gmail.com">abc2.jagadale@gmail.com</a>

字符串中的DOM

下面的sn-p获取字符串中的所有锚点（转换为DOM元素）

var s = `<a href="mailto:email3@domain.com">email3@domain.com</a>
<a href="mailto:email4@domain.com">email4@domain.com</a>`

$("<div></div>").html(s).find("a").each(function() {
  console.log($(this).text())
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="mailto:email1@domain.com">email1@domain.com</a>
<a href="mailto:email2@domain.com">email2@domain.com</a>

Answer 4

考虑到解析字符串的用例，而不是使用实际的 DOM，似乎正则表达式是可行的方法，除非您想将 HTML 加载到 document fragment 并解析它。

获取所有匹配项的一种方法是使用split：

var htmlstr = "<p><a href='url'>asdf@bsdf.com</a></p>"

var matches = htmlstr.split(/<a.+?>([A-Za-z.@]+)<\/a>/).filter((t, i) => i % 2)

使用带有 split 的正则表达式会返回所有匹配项以及它们周围的文本，然后按索引 % 2 过滤会将其缩减为仅正则表达式匹配项。