如何用JavaScript通过正则提取iframe的frame name？

没问题，我帮你修正正则表达式来获取目标frame name，直接看解决方案：

问题回顾 #

我希望从以下iframe字符串中提取frame name：

<iframe title="recaptcha challenge" src="https://www.google.com/recaptcha/api2/bframe?hl=en&amp;amp;v=v1526338122299&amp;amp;k=6Le-wvkSAAAAAPBMRTvw0Q4Muexq9bi0DJwx_mJ-&amp;amp;cb=ylg7rbi4vs61#4u0yaht3nqk" style="width: 100%; height: 100%; outline: 1px solid blue;" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox" name="4u0yaht3nqk" frameborder="0"></iframe>

我的当前JavaScript代码为：

var str = '<iframe title="recaptcha challenge" src="https://www.google.com/recaptcha/api2/bframe?hl=en&amp;amp;v=v1526338122299&amp;amp;k=6Le-wvkSAAAAAPBMRTvw0Q4Muexq9bi0DJwx_mJ-&amp;amp;cb=ylg7rbi4vs61#4u0yaht3nqk" style="width: 100%; height: 100%; outline: 1px solid blue;" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox" name="4u0yaht3nqk" frameborder="0"></iframe>';
var res = str.match(/name=/);
console.log(res);

预期输出为“4u0yaht3nqk”，但当前代码无法得到正确结果，请求仅使用正则表达式修正代码。

修正后的代码 #

var str = '<iframe title="recaptcha challenge" src="https://www.google.com/recaptcha/api2/bframe?hl=en&amp;amp;v=v1526338122299&amp;amp;k=6Le-wvkSAAAAAPBMRTvw0Q4Muexq9bi0DJwx_mJ-&amp;amp;cb=ylg7rbi4vs61#4u0yaht3nqk" style="width: 100%; height: 100%; outline: 1px solid blue;" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox" name="4u0yaht3nqk" frameborder="0"></iframe>';
// 匹配双引号包裹的name属性值
var res = str.match(/name="([^"]+)"/)[1];
console.log(res); // 输出: 4u0yaht3nqk

为什么原代码不行？ #

你的原正则/name=/只能匹配到name=这个字符串片段，完全没有捕获后面的属性值内容，自然得不到预期结果。

正则说明 #

修正后的正则/name="([^"]+)"/逻辑很清晰：

• name="：精准匹配属性名和开头的双引号
• ([^"]+)：捕获组，匹配所有非双引号的字符（也就是属性值本身）
• "：匹配属性值结尾的双引号
• 最后通过[1]提取捕获组里的内容，就是我们需要的frame name。

兼容单引号的进阶版本 #

如果需要兼容属性值用单引号包裹的情况，可以用更灵活的正则：

var res = str.match(/name=(["'])([^"']+)\1/)[2];

这里(["'])捕获开头的引号类型，\1确保结尾的引号和开头一致，[^"']+匹配属性值，最后用[2]提取目标内容。

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