JavaScript 中如何从具有不规则结构的 a 元素中获取 href 属性？

## 如何轻松获取 JavaScript 中 A 元素的 href 属性

对于前端开发人员来说，操作和获取页面元素的属性是日常任务的一部分。其中一项常见任务是获取链接（a 元素）的 href 属性，这对于导航、重定向和许多其他场景至关重要。然而，有时我们会遇到一些棘手的 HTML 结构，使得使用简单的正则表达式无法轻松地提取 href 属性。

### 问题：不规则的 a 元素结构

考虑以下 HTML 片段：

<a title="this" href="that">what?</a>

对于这个链接，简单的正则表达式如 <a.*?href=".*?".*?>.*?</a> 可能会失败，因为 href 属性并非 a 元素中的第一个属性。

### 解决方案：修改正则表达式

为了解决这个问题，我们可以修改正则表达式以允许 href 属性前面有空格：

<a\s[^>]*\s+href=(\"\'??)([^\"\' >]*?)[^>]*>(.*)<\/a>

此正则表达式包括以下部分：

• <a：a 元素的开始标记。
• \s[^>]*\s+：允许 a 元素中存在空格和其他非 > 字符。
• href=(\"\'??)：href 属性的开始，双引号或单引号内的 URL。
• ([^\"\' >]*?)：URL 内容，以第一个非引号、非空格或非 > 字符结束。
• [^>]*>：a 元素的其余部分，直到 >。
• (.*)：a 元素的内容。
• \/a>：a 元素的结束标记。

### 示例：使用修改后的正则表达式

使用修改后的正则表达式，我们可以在 JavaScript 中提取链接的 href 属性：

const regex = /<a\s[^>]*\s+href=(\"\'??)([^\"\' >]*?)[^>]*>(.*)<\/a>/;
const match = regex.exec("<a title=\"this\" href=\"that\">what?</a>");

console.log(match[2]); // "that"

### 注意：转义 HTML 字符串

在使用正则表达式解析 HTML 字符串之前，请确保转义特殊字符，以避免任何意外行为。

### 结论

通过使用修改后的正则表达式，我们能够可靠地从具有不规则结构的 a 元素中提取 href 属性。此技术在前端开发中非常有用，因为它可以简化元素操作并提高代码的鲁棒性。

### 常见问题解答

Q1：为什么我们需要修改正则表达式？
A1： 默认的正则表达式无法处理 href 属性不在 a 元素中排在第一位的情况。

Q2：修改后的正则表达式有哪些不同之处？
A2： 修改后的正则表达式允许 href 属性前面有空格。

Q3：如何使用修改后的正则表达式？
A3： 与标准正则表达式相同，可以使用 exec() 方法匹配字符串。

Q4：是否有其他方法来提取 href 属性？
A4： 除了正则表达式之外，还可以使用 DOM 解析方法，例如 querySelector() 或 getElementByTagName()。

Q5：修改后的正则表达式有哪些限制？
A5： 它可能无法处理 href 属性中包含实体引用的情况。