输入图像视频链接查看预览
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>通用媒体提取器：图片 + 视频 + BBCode 支持</title>
<style>
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;line-height:1.5;margin:0;padding:24px;background:#0b0c0f;color:#e6e6e6;scroll-behavior:smooth}
h1{font-size:20px;margin:0 0 12px}
textarea{width:100%;min-height:160px;padding:12px;border-radius:12px;border:1px solid #2b2f36;background:#12141a;color:#e6e6e6;resize:vertical;margin-bottom:12px}
button{background:#3b82f6;border:none;color:white;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:600;margin-right:8px}
button.secondary{background:#2b2f36;color:#d0d0d0}
.tip{font-size:12px;color:#9aa0a6;margin:8px 0 16px}
.grid{display:flex;flex-wrap:wrap;gap:12px}
figure{margin:0;background:#12141a;border:1px solid #2b2f36;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;max-width:400px}
figure>img,figure>video{max-width:100%;height:auto;object-fit:contain;background:#0b0c0f;cursor:pointer;border-radius:10px}
figcaption{font-size:12px;padding:6px 4px;color:#9aa0a6;word-break:break-all}
.err{color:#ff8a8a}
#topBtn{position:fixed;bottom:24px;right:24px;background:#3b82f6;color:white;border:none;border-radius:50%;width:48px;height:48px;font-size:20px;cursor:pointer;display:none;box-shadow:0 4px 10px rgba(0,0,0,0.3)}
#topBtn:hover{background:#2563eb}
</style>
</head>
<body>
<h1>通用媒体提取器（支持图片、视频、BBCode）</h1>
<textarea id="urls" placeholder="可粘贴任意文字，自动提取图片/视频链接，如：\n#3 http://x.cn/a.jpg http://x.cn/b.png [img]http://x.cn/c.webp[/img] [url=\"http://x.cn/d.jpg\"]http://x.cn/e.jpg[/url]\nhttp://x.cn/f.mp4"></textarea>
<button id="render">显示媒体</button>
<button id="clear" class="secondary">清空</button>
<div class="tip">自动识别常见图片格式（.jpg/.jpeg/.png/.gif/.webp/.svg/.avif/.tiff/.bmp）及视频格式（.mp4/.webm/.mov）。支持 [IMG]、[URL] 等 BBCode 混合。点击图片或视频可在新标签打开原文件。</div>
<div id="grid" class="grid"></div>
<button id="topBtn" title="返回顶部">↑</button>
<script>
const $ = s => document.querySelector(s);
const urlsEl = $('#urls');
const grid = $('#grid');
const topBtn = $('#topBtn');
const IMG_EXT = ['jpg','jpeg','png','gif','webp','bmp','svg','avif','tiff'];
const VID_EXT = ['mp4','webm','mov'];
function sanitizeUrl(u){
try{
const url = new URL(u);
if(!/^https?:$/.test(url.protocol)) return null;
return url.toString();
}catch{ return null }
}
function extractUrlsFromText(text){
text = text.replace(/\[img\]|\[\/img\]|\[url.*?\]|\[\/url\]/gi, ' ');
const regex = /https?:\/\/[^\s\"]+/gi;
const matches = text.match(regex) || [];
return matches.map(m=>m.replace(/["\)\]\>]+$/,'').trim());
}
function render(){
grid.innerHTML='';
const allText = urlsEl.value;
const urls = extractUrlsFromText(allText);
let idx=0;
for(const raw of urls){
const u = sanitizeUrl(raw);
if(!u) continue;
const ext = (u.split('.').pop()||'').toLowerCase().split('?')[0];
if(IMG_EXT.includes(ext)){
idx++; addCard('img',u,`#${idx} ${u}`);
} else if(VID_EXT.includes(ext)){
idx++; addCard('video',u,`#${idx} ${u}`);
}
}
if(idx===0) grid.innerHTML='<div class="err">未检测到图片或视频链接</div>';
}
function addCard(type,src,caption){
const fig = document.createElement('figure');
const cap = document.createElement('figcaption');
cap.textContent = caption;
if(type==='img'){
const img = document.createElement('img');
img.loading='lazy';
img.referrerPolicy='no-referrer';
img.src=src;
img.alt=caption;
img.onclick=()=>window.open(src,'_blank');
fig.appendChild(img);
} else if(type==='video'){
const vid=document.createElement('video');
vid.controls=true;
vid.src=src;
vid.onclick=()=>window.open(src,'_blank');
fig.appendChild(vid);
}
fig.appendChild(cap);
grid.appendChild(fig);
}
$('#render').addEventListener('click', render);
$('#clear').addEventListener('click', ()=>{ urlsEl.value=''; grid.innerHTML=''; });
window.addEventListener('scroll', ()=>{
topBtn.style.display = window.scrollY > 200 ? 'block' : 'none';
});
topBtn.addEventListener('click', ()=> window.scrollTo({top:0,behavior:'smooth'}));
// 示例
urlsEl.value = [
'#3 http://x.cn/10264/BvHGEzkIEAAUVhS_large.jpg http://x.cn/e.jpg',
'[url="http://x.cn/s.jpg"]http://x.cn/.jpg[/url]',
'[url="http://x.cn/555.jpg"]http://x.cn/sdd.jpg[/url]',
'https://upload.wikimedia.org/wikipedia/commons/3/3f/JPEG_example_flower.jpg',
'https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4'
].join('\n');
</script>
</body>
</html>
❤️ 转载文章请注明出处，谢谢！❤️