新闻详情

新闻详情

首页 / 资讯中心 / 详情

检测链接的前端代码

发布时间:2026/11/13 23:36:01来源:尧图网络
检测链接的前端代码
##任务1在WEB前端中提取所有图片URL和图片绑定的响应跳转链接。##任务2在WEB前端中提取所有外站链接的地址。##任务3在WEB前端中提取所有带文字描述的内部链接及其对应的文字标题。##任务4在WEB前端中除上述3个任务中的元素以外提取出内部链接和对应的元素类型如button、icon等。void(function() { const currentHost window.location.hostname; // 获取当前域名用于判断内外站 const extractedLinks new Set(); // 记录已提取的链接用于任务4的去重 const results { task1_images: [], // 图片及跳转链接 task2_externalLinks: [], // 外站链接 task3_internalTextLinks: [],// 内部文字链接 task4_otherInternalLinks: []// 其他内部链接(按钮/图标等) }; // 辅助函数判断是否为外站 const isExternal (url) { try { return new URL(url, window.location.origin).hostname ! currentHost; } catch { return false; } }; // 辅助函数判断元素是否包含图标通过类名或属性 const isIconElement (el) { const classStr el.className?.toString().toLowerCase() || ; const roleStr el.getAttribute(role)?.toLowerCase() || ; return classStr.includes(icon) || roleStr.includes(icon) || roleStr.includes(button); }; // 任务 1提取所有图片URL和绑定的跳转链接 document.querySelectorAll(img).forEach(img { const imgUrl img.src || img.dataset.src || img.dataset.original; if (!imgUrl || imgUrl.startsWith(data:)) return; const linkTag img.closest(a); const redirectUrl linkTag ? linkTag.href : null; results.task1_images.push({ imageUrl: imgUrl, redirectUrl: redirectUrl || 无跳转链接, tagName: linkTag ? linkTag.tagName.toUpperCase() : IMG // 增加标签名称 }); if (redirectUrl) extractedLinks.add(redirectUrl); // 记录已处理的链接 }); // 遍历所有 a 标签处理任务 2 3 4 document.querySelectorAll(a[href]).forEach(link { const href link.href; const text link.innerText?.trim(); const hasText text text.length 0; const tagName link.tagName.toUpperCase(); // 获取标签名 // 任务 2提取外站链接 if (isExternal(href)) { results.task2_externalLinks.push({ url: href, text: hasText ? text : 无文字描述, tagName: tagName }); } // 内部链接处理 else { extractedLinks.add(href); // 只要是内部链接都记录到已提取集合中 // 任务 3带文字描述的内部链接 if (hasText) { results.task3_internalTextLinks.push({ url: href, title: text, tagName: tagName }); } // 任务 4除上述任务外提取其他内部链接及元素类型 else { // 判断该链接是否已经被任务1图片处理过避免重复 const hasImg link.querySelector(img) ! null; if (!hasImg) { let elementType Link; // 默认类型 if (link.getAttribute(role) button) { elementType Button; } else if (isIconElement(link)) { elementType Icon; } results.task4_otherInternalLinks.push({ url: href, elementType: elementType, tagName: tagName }); } } } }); // 任务 4 补充提取非 a 标签的内部按钮/图标 document.querySelectorAll(button, [rolebutton], [class*icon], [roleicon]).forEach(el { // 排除已经是 a 标签且被处理过的元素 if (el.tagName.toLowerCase() a extractedLinks.has(el.href)) return; let elementType Unknown; if (el.tagName.toLowerCase() button) elementType Button; else if (isIconElement(el)) elementType Icon; // 尝试获取按钮/图标的文字或 aria-label const text el.innerText?.trim() || el.getAttribute(aria-label) || 无文字描述; results.task4_otherInternalLinks.push({ url: el.onclick?.toString() || 无跳转链接, elementType: elementType, description: text, tagName: el.tagName.toUpperCase() // 增加标签名称 }); }); // 格式化输出结果 const resultDiv document.createElement(div); resultDiv.id web-asset-extractor-result; const oldDiv document.getElementById(web-asset-extractor-result); if (oldDiv) oldDiv.remove(); let html b 网页资产提取完成 (含标签名)/bhr; html b️ 任务1 - 图片及跳转 (${results.task1_images.length})/bbr; results.task1_images.slice(0, 3).forEach(i html • [${i.tagName}] ${i.imageUrl} ➔ ${i.redirectUrl}br); if (results.task1_images.length 3) html ... 等共 ${results.task1_images.length} 项br; html brb 任务2 - 外站链接 (${results.task2_externalLinks.length})/bbr; results.task2_externalLinks.slice(0, 3).forEach(i html • [${i.tagName}] ${i.url} (${i.text})br); if (results.task2_externalLinks.length 3) html ... 等共 ${results.task2_externalLinks.length} 项br; html brb 任务3 - 内部文字链接 (${results.task3_internalTextLinks.length})/bbr; results.task3_internalTextLinks.slice(0, 3).forEach(i html • [${i.tagName}] ${i.title} ➔ ${i.url}br); if (results.task3_internalTextLinks.length 3) html ... 等共 ${results.task3_internalTextLinks.length} 项br; html brb 任务4 - 其他内部元素 (${results.task4_otherInternalLinks.length})/bbr; results.task4_otherInternalLinks.slice(0, 3).forEach(i html • [${i.tagName} / ${i.elementType}] ${i.description || i.url}br); if (results.task4_otherInternalLinks.length 3) html ... 等共 ${results.task4_otherInternalLinks.length} 项br; resultDiv.style.cssText position:fixed;top:10px;left:10px;z-index:999999;background:#fff;border:1px solid #ccc;padding:15px;max-height:500px;overflow:auto;font-size:12px;box-shadow:0 4px 15px rgba(0,0,0,0.15);color:#333;max-width:600px;word-break:break-all;line-height:1.6;; resultDiv.innerHTML html; document.body.appendChild(resultDiv); // 在控制台输出完整的 JSON 数据方便复制使用 console.log( 完整提取数据 (JSON), results); })();
网站建设高端定制企业官网
RELATED

相关资讯

更多精彩内容,欢迎继续阅读

较早相关资讯

最新相关资讯

【外设】之大彩串口显示屏 2026/11/14 3:51:47

【外设】之大彩串口显示屏

大彩串口屏初步使用 1 .官网下载 STM32 屏幕 GUI 设计资料 http://www.gz-dc.com/category/typeid/4112 找到 STM32 Keil 工程,移植相关代码因项目而异进行移植,由于项目简单,本人只对用到的指令接口进行修改。 比如:注意事项&…

阅读更多 →
无法下载Windows系统iso文件 2026/11/12 23:59:09

无法下载Windows系统iso文件

当我遇到这个问题的时候,我打开了一个网站: 登录 然后我打算下载的时候: 突然那个官方的连接就可以下载了:

阅读更多 →
【清华代码熊】DeepSeek V4.1 Flash 后训练详解 2026/11/14 10:11:15

【清华代码熊】DeepSeek V4.1 Flash 后训练详解

📌 上期解析了 DeepSeek V4.1 Flash 模型架构改进,本期解析 DeepSeek V4.1 Flash 预训练/后训练技术: 🌟 预训练:45T 文本 多模态混合语料、直接训练 sparse attention(取消 DeepSeek V4 的 dense 冷启动&…

阅读更多 →
Shuffle-R1: Efficient RL framework for Multimodal Large Language Models via Data-centric Dynamic ... 2026/11/13 13:31:48

Shuffle-R1: Efficient RL framework for Multimodal Large Language Models via Data-centric Dynamic ...

文章主要内容和创新点 主要内容 本文聚焦于多模态大语言模型(MLLM)强化学习(RL)训练中的效率问题,提出了一个名为Shuffle-R1的框架。研究发现,当前RL训练存在两个关键缺陷: 优势值坍缩(Advantage Collapsing):批次中大多数优势值集中在零附近,导致有效梯度信号被淹…

阅读更多 →
PRvL: Quantifying the Capabilities and Risks of Large Language Models for PII Redaction 2026/11/13 16:11:45

PRvL: Quantifying the Capabilities and Risks of Large Language Models for PII Redaction

一、文章主要内容总结 本文聚焦于利用大型语言模型(LLMs)实现个人身份信息(PII)脱敏的研究,旨在解决传统脱敏方法(如基于规则的系统、领域特定命名实体识别(NER)模型)泛化能力差、跨格式/跨语境适应性弱的问题。 研究通过全面评估多种LLM架构(包括密集型LLM(D-LLM…

阅读更多 →
LLaVA-RE: Binary Image-Text Relevancy Evaluation with Multimodal Large Language Model 2026/11/14 3:51:43

LLaVA-RE: Binary Image-Text Relevancy Evaluation with Multimodal Large Language Model

文章主要内容和创新点 主要内容 本文聚焦于二进制图像-文本相关性评估任务(判断图像与文本“相关”或“不相关”),针对该任务中文本格式多样、相关性定义随场景变化等挑战,提出了基于多模态大语言模型(MLLM)的解决方案LLaVA-RE。 模型设计:LLaVA-RE基于LLaVA 1.5架构,…

阅读更多 →

今日资讯

本周资讯

本月资讯

看完文章仍有疑问?

联系尧图顾问,获取一对一建站咨询

立即免费咨询 📞 400-888-8888
📞 ✉