V 站的各位大大,求个正则表达式,获取图片 src,小弟写了很久没写出来

2019-11-14 16:14:20 +08:00
 rootzzz

这有个字符串,想要用 js 获取里面的第一个图片的 src 链接,参考了网上很多写法,终究没写出来,请各位赐教

"<p>老牌手机论坛“<span class='wp_keywordlink_affiliate'><a href=\"https://fulibus.net/tag/%e6%99%ba%e5%8f%8b\" title=\"View all posts in 智友\" target=\"_blank\">智友</a></span>论坛”近期宣布关闭,呼吁用户注意保存数据</p>\n<p><span class='wp_keywordlink_affiliate'><a href=\"https://fulibus.net/tag/%e6%99%ba%e5%8f%8b\" title=\"View all posts in 智友\" target=\"_blank\">智友</a></span>论坛创建于 2010 年 3 月</p>\n<p>相信不少朋友这些年在这里下载过一些群众喜闻乐见的软件</p>\n<p>近期因为母公司经营问题等原因,老论坛关闭</p>\n<p>预计老论坛内容 11 月 13 日左右调整关闭</p>\n<p>虽然老站关闭,但是网站开启了<span class='wp_keywordlink_affiliate'><a href=\"https://fulibus.net/tag/%e6%99%ba%e5%8f%8b\" title=\"View all posts in 智友\" target=\"_blank\">智友</a></span>新论坛</p>\n<p>只是目前访问速度很慢,服务器不稳定</p>\n<p>需要的朋友可以现在注册一下!</p>\n<p><strong>网站公告:(<a target=\"_blank\" href=\"http://bbs.zhiyoo.com/forum.php?mod=announcement&amp;id=108#108\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\">点击查看</a>)</strong></p>\n<blockquote><p>近期本站将关闭 请大家备份好数据</p>\n<p>预计 11 月 13 日 服务器调整 本站将关闭 请大家备份好数据!</p>\n<p>始于 2010 年 3 月 感谢大家的陪伴!<br />\n 我们将以新的姿态和大家见面</p>\n<p>请即时备份好您的数据,不是数据 那是时光。</p>\n<p>感谢大家长久以来对智友 安智的支持!</p></blockquote>\n<p><strong>智友新论坛(纯净):<a target=\"_blank\" href=\"http://bbs.zhiyoo.net\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\">http://bbs.zhiyoo.net</a></strong></p>\n<p><strong>智友新论坛(邀请):<a target=\"_blank\" href=\"http://bbs.zhiyoo.net/?fromuser=Eden\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\">http://bbs.zhiyoo.net</a></strong></p>\n<p><img src=\"https://tva1.sinaimg.cn/large/006BNqYCly1g8wc4qr2pnj31570ikadp.jpg\" /></p>\n<p><img src=\"https://tva1.sinaimg.cn/large/006BNqYCly1g8wc4g3633j314s0nnwn0.jpg\" /></p>\n"
2588 次点击
所在节点    程序员
19 条回复
ifeely
2019-11-14 16:23:58 +08:00
var rImgSrc = /( https:\/\/[\w.\/!\-]+.(?:jpg|png|jpeg))/ig;
optional
2019-11-14 16:26:55 +08:00
str.match(/\<img[^\>]+src="(.+?)"/i)[1]
zzzzhan
2019-11-14 16:28:45 +08:00
match(/src="(.*)"\s/)[1]
mgso
2019-11-14 16:36:54 +08:00
str.match(/<img src=(\S+)/)[1]

匹配以<img src=非空白的字符串。不加 g 修饰符则只匹配一次结果,(\S+)是讲图片地址分组。

拿到结果后取索引 1,对应正则第一个分组内容即为图片地址
ESeanZ
2019-11-14 16:58:18 +08:00
直接$("img").attr("src") 不好吗?
vow
2019-11-14 17:01:36 +08:00
Array.from(document.querySelectorAll('img')).map(i=>(i.src||''))
mara1
2019-11-14 17:11:20 +08:00
为啥放字符串里,可以直接用选择器从 dom 里抓吗?
rootzzz
2019-11-14 17:33:25 +08:00
@ESeanZ emmm 这是用 wordpress rest api 返回的数据,我要从中找一个图渲染 vue 构建的页面
rootzzz
2019-11-14 17:34:01 +08:00
@mara1 因为输出的是文章列表,每个都渲染一次,很耗费内存和时间
rootzzz
2019-11-14 17:48:57 +08:00
@mgso
@zzzzhan
@optional
@ifeely

感谢各位前辈
imlinhanchao
2019-11-14 17:49:37 +08:00
var div = document.createElement('div');
div.innerHTML = "...";
Array.from(div.getElementsByTagName('img')).map(i => i.src);
imlinhanchao
2019-11-14 17:53:57 +08:00
@imlinhanchao 噢,不要渲染。那忽略我。。。
shawndev
2019-11-14 18:38:34 +08:00
xpath 它不香吗?
mczhanhong
2019-11-15 09:04:09 +08:00
推荐提问方式:垃圾正则表达式,连图片 src 都获取不了( PS:手动狗头)
kangzai50136
2019-11-15 09:50:04 +08:00
智友论坛要关了?一个时代的落幕啊。
Kingsfree
2019-11-15 14:09:37 +08:00
xpath 多好用
rootzzz
2019-11-15 14:37:47 +08:00
@mczhanhong 要狗头保命 我觉得更合适
rootzzz
2019-11-15 14:38:30 +08:00
@Kingsfree xpath 是不是不能用在字符串里
CHENJIAJIE
2019-11-15 15:17:48 +08:00
服务端 cherrio 浏览器 jsdom 也行吧

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/619577

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX