js 正则表达式获取html标签的属性值

1,630 阅读1分钟

为了匹配比较复杂或不标准的html标签,并从中取出属性的值

从a标签中获取href属性值的正则表达式

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

通用html标签属性值提取的正则表达式

const getRegExp = (tagName, attrName) => new RegExp(`<${tagName}(?:[^'">]*(?:"[^"]*"|'[^']*')(?<! ${attrName}=))*[^'">]* ${attrName}=(?:'([^']+)'|"([^"]+)"|([^'" <>]+)).*(?:>[^<>]*<\/${tagName}|\/)>`)

/* 使用:匹配分组结果里的第一项为属性值被单引号包裹的情况,第二项为被双引号包裹的情况,第三项为不被包裹的情况
* 比如:<a href='t' /> 、<a href="t" />、 <a href=t />
* 所以需要整合一下结果
*/
htmlStr.match(getRegExp(tagName, attrName))?.slice(1,4).filter(Boolean)[0]

使用案例

`<a data-t=" href=t1" href="t2"></a>`.match(getRegExp('a', 'href'))?.slice(1,4).filter(Boolean)[0] // 返回t2

复杂情况

`<a t-href=href t-href="mock href=" t-href='mock href="t2"'   href="real-href"  t-href=href-t3>111</a>`.match(getRegExp('a', 'href'))?.slice(1,4).filter(Boolean)[0] // 返回 real-href