如何在浏览器环境提取资源标签的href src action URL-Go服务器开发

在浏览器环境中提取 HTML 字符串中的 href、src、action 等资源 URL，可以通过以下 纯 JavaScript 方案（无需第三方库）或 高效轻量库 实现。以下是具体方法和代码示例：

一、纯 JavaScript 方案（无依赖）

1. 使用 `DOMParser`（推荐）

   function extractUrlsFromHtml(htmlString) {
     const parser = new DOMParser();
     const doc = parser.parseFromString(htmlString, 'text/html');
     
     // 选择所有包含目标属性的元素
     const elements = doc.querySelectorAll('[href],[src],[action]');
     const urls = [];
     
     elements.forEach(el => {
       if (el.href) urls.push({ type: 'href', url: el.href });
       if (el.src) urls.push({ type: 'src', url: el.src });
       if (el.action) urls.push({ type: 'action', url: el.action });
     });
     
     return urls;
   }

   // 示例用法
   const html = `
     <a href="https://example.com">Link</a>
     <img src="image.png">
     <form action="/submit"></form>
   `;
   console.log(extractUrlsFromHtml(html));
   // 输出:
   // [
   //   { type: 'href', url: 'https://example.com/' },
   //   { type: 'src', url: 'image.png' },
   //   { type: 'action', url: '/submit' }
   // ]

2. 正则表达式（快速但需谨慎）

适用于简单场景，但对复杂 HTML 可能不够健壮：

   function extractUrlsWithRegex(html) {
     const regex = /(href|src|action)=["']([^"']+)["']/gi;
     const matches = [];
     let match;
     
     while ((match = regex.exec(html)) !== null) {
       matches.push({ type: match[1], url: match[2] });
     }
     
     return matches;
   }
   
   console.log(extractUrlsWithRegex('<a href="/link">Click</a>'));

二、轻量第三方库方案

1. 使用 linkedom（无 DOM 依赖）

适合需要 DOM API 但不想依赖浏览器环境的场景：

import { parseHTML } from 'linkedom';

const { document } = parseHTML('<img src="pic.jpg">');
const src = document.querySelector('img').src; // "pic.jpg"

2. 使用 cheerio（类 jQuery API）

通过 <script> 直接引入预构建版本：

<script src="https://cdn.jsdelivr.net/npm/cheerio@1.0.0/dist/cheerio.min.js"></script>
<script>
  const $ = cheerio.load('<a href="/demo">Demo</a>');
  console.log($('a').attr('href')); // "/demo"
</script>

三、注意事项

URL 规范化
提取的 URL 可能是相对路径，建议用 new URL(url, base) 处理：

const baseUrl = 'https://example.com';
const relativeUrl = '/path';
const absoluteUrl = new URL(relativeUrl, baseUrl).href; 
// "https://example.com/path"

安全性过滤
避免提取恶意内容（如 javascript:伪协议）：

if (url.startsWith('http') || url.startsWith('/')) {
    // 安全URL
}

性能优化
对超大 HTML，可用 MutationObserver + TreeWalker 增量解析。

四、各方案对比

方法	优点	缺点
`DOMParser`	浏览器原生支持，精准	XSS风险需处理
Regex	极简快速	无法处理复杂HTML结构
`linkedom`	无DOM依赖，轻量	API较底层
`cheerio`	jQuery式友好API	~200KB体积