正则环视匹配问题：普通文本有效，HTML href属性值提取失败求方案

嘿，我来帮你搞定这个正则提取HTML href属性值的问题！

首先咱们得搞清楚为啥你之前的正则会返回多余内容：你的正则/(?!href=")[^"]+?(?=")/g里，(?!href=")是负向先行断言，它的作用是“当前位置的后面不能是href="”。但像<a href=这类内容里，每个字符的位置后面都不满足href="，所以[^"]+?会匹配到下一个双引号前的所有内容——比如<a href=就会被匹配到，因为它后面是url"，不是href="，这就导致了多余的结果。

解决方案1：使用正向环视精准定位 #

如果你的运行环境支持ES2018及以上的正则特性（比如现代浏览器、Node.js 10+），可以用正向后行断言配合正向先行断言，直接精准匹配href属性值：

const str = '<a href="url"></a><a href="url2"></a><a href="url3"></a>';
const regex = /(?<=href=")[^"]+(?=")/g;
const urls = str.match(regex);
console.log(urls); // 输出 ["url", "url2", "url3"]

这里(?<=href=")是后行断言，确保匹配内容的前面是href="；(?=")是先行断言，确保匹配内容的后面是双引号；中间的[^"]+匹配所有非双引号的字符，正好就是我们要的属性值。

解决方案2：捕获组兼容旧环境 #

如果需要兼容不支持后行断言的旧环境，用捕获组是更稳妥的选择：

const str = '<a href="url"></a><a href="url2"></a><a href="url3"></a>';
const regex = /href="([^"]+)"/g;
const urls = [];
let match;
while ((match = regex.exec(str)) !== null) {
  urls.push(match[1]); // 提取第一个捕获组的内容
}
console.log(urls); // 输出 ["url", "url2", "url3"]

或者用matchAll（同样需要支持ES2020+）简化代码：

const urls = Array.from(str.matchAll(regex), match => match[1]);

更靠谱的HTML处理方式 #

其实正则并不是处理HTML的最佳选择——如果HTML结构复杂（比如属性里有转义的双引号、属性名和值之间有空格、或者href不是第一个属性），正则很容易失效。更可靠的方式是用浏览器的DOM API：

const str = '<a href="url"></a><a href="url2"></a><a href="url3"></a>';
const tempElement = document.createElement('div');
tempElement.innerHTML = str;
// 提取所有a标签的href属性值
const urls = Array.from(tempElement.querySelectorAll('a'), link => link.getAttribute('href'));
console.log(urls); // 输出 ["url", "url2", "url3"]

这种方法能自动处理各种HTML语法细节，比正则更稳定。

内容的提问来源于stack exchange，提问作者user9279114